# Preview Your Storefront in Business Manager

Preview your PWA Kit storefront in Business Manager to verify how it looks based on shopper context including customer groups, date and time, source code triggers, and qualifiers. Use it to test changes to products, pricing, and marketing strategies in a staging environment before deploying to production, ensuring your site displays correctly for specific scenarios like upcoming sales or seasonal campaigns.

## Prerequisites

### PWA Kit Version

A recent PWA Kit version. We recommend using [PWA Kit](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.md) version 3.18 or later.

### Prerequisite Setup

- Link your PWA Kit storefront to B2C Commerce in Business Manager. The storefront link makes the MRT environment and storefront data available so that Storefront Preview can identify which environment to associate with the storefront and site. In Business Manager, click App Launcher ![App Launcher](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/shared/appLauncher.png) and then select **Administration > Sites > Storefronts**. Click **Add Existing**, and then select **Link a Storefront from Managed Runtime**.
- The Storefront Preview feature requires the same headless design that Page Designer uses even if you aren't using Page Designer. Perform these steps from [Migration Steps](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/page-designer.md#migration-steps):
  - [Step 1: Install Required Dependency](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/page-designer.md#step-1-install-required-dependency)
  - [Step 6: Set Up PageDesignerProvider in App Component](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/page-designer.md#step-6-set-up-pagedesignerprovider-in-app-component)
- [Enable shopper context](https://developer.salesforce.com/docs/commerce/commerce-api/guide/shopper-context-api-personalized.md#enable-shopper-context) in Business Manager.
- Set up your site based on the functionality you want to validate in Storefront Preview. Examples:
  - Set up [custom qualifiers](https://help.salesforce.com/s/articleView?id=cc.b2c_using_session_custom_attributes.htm\&type=5) and [customer group IDs](https://help.salesforce.com/s/articleView?id=cc.b2c_creating_a_customer_group.htm\&type=5) using customer groups in Business Manager to apply rules for personalized pricing, products, or promotions.
  - To see a personalized shopper experience, set up source code that calls the [Shopper Context endpoints](https://developer.salesforce.com/docs/commerce/commerce-api/guide/shopper-context-api.md). This is required because Storefront Preview uses context information for personalization.
  - Set up the pricing that you want to offer on a particular date. That way your specified pricing appears when you select that date in Storefront Preview.
- Configure your storefront's Content Security Policy to allow the Business Manager hostname. See [Configure Content Security Policy](/docs/commerce/b2c-commerce/guide/page-designer.md#6-configure-content-security-policy).

### Supported Browsers

You can use Storefront Preview with the latest versions of Chrome or Safari.

## Considerations

- Data and experiences shown in Storefront Preview don't necessarily reflect the shopper experience. Shopper personalization requires the use of the Shopper Context API within your PWA Kit project. Learn more about [Shopper Context](https://developer.salesforce.com/docs/commerce/commerce-api/guide/shopper-context-api.md).
- Storefront Preview works on PWA Kit pages and not on Storefront Reference Architecture (SFRA) pages. However, you can use [Storefront Toolkit Site Preview Tool in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_using_the_site_preview_tool.htm) to preview SFRA pages.
- Previewing a local development environment isn't currently supported.

## Preview Your Storefront

To use Storefront Preview:

1. In Business Manager, click App Launcher ![App Launcher](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/shared/appLauncher.png) and then select **Merchant Tools**, select the site associated with your storefront, and then click **Preview**.

   A new tab opens showing the storefront, with the Storefront Preview form on the left sidebar.

2. To view the storefront based on various settings, select preview settings by clicking the preview button on the banner of the preview site.

   ![Preview settings on the preview site](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/pwa-kit-managed-runtime/preview-settings.png)

   Enter preview settings for the site. All the preview settings are optional.

   a. To view the site for a specific customer group, select a customer group from the picklist.

   b. To see how the site looks on a specific date and time, select the effective **date** and **time** using the date picker in `On Date`. The date and time displayed is based on your computer's time zone and then converted to UTC time before sending the request that sets the context. If you don't specify a date and time, the preview reflects the current date and time.

   c. To trigger the promotion or campaign assignment and price books, which are assigned to a source code group, select the triggering source code from the picklist.

   d. To view the personalized prices, products, or promotions set up in Business Manager, enter the custom qualifiers as key and value pairs. The custom qualifier keys must be unique. You can define up to 20 custom qualifiers.

3. Click **Apply**.

   You can now view with the storefront using the context you want to preview. Interact with the storefront to verify the applied context. For example, select a particular size for a merchandise to see any available discounted price.

## Debug Storefront Preview

If you experience any issues with Storefront Preview, you can enable Storefront Preview logs in your MRT environment.
This prints extra logs when you click the **Preview** button to help you debug the issues.

To enable Storefront Preview logs, add the MRT [environment variable](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/managed-runtime-administration.md#environment-variables) `STOREFRONT_PREVIEW_DEBUG=1` to your MRT environment.

You can use [MRT tail logs](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/debugging.md#tail-logs-on-managed-runtime) to read the Storefront Preview logs.