Preview Your Storefront in Business Manager

Preview you 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.

A recent PWA Kit version. We recommend using PWA Kit version 3.18 or later.

• Connect your PWA Kit storefront to B2C Commerce in Business Manager. The storefront connection 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 and then select Administration > Sites > Storefronts > Connect Existing.
• Migrate your Page Designer components from ISML to the headless design. Perform these migration steps in Integrate Page Designer with PWA Kit:
  • Step 1: Install Required Dependency
  • Step 2: Update Component Metadata to Headless
  • Step 3: Update Page Metadata with Routes
  • Step 4: Update Aspect Type Metadata
  • Step 5: Migrate from Manual Mapping to Registry
  • Step 6: Set Up PageDesignerProvider in App Component
• 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 and customer group IDs 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. 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 browser to allow third-party cookies on https://runtime.commercecloud.com.

You can use Storefront Preview with the latest versions of Chrome or Safari. Your browser must allow https://runtime.commercecloud.com to access third-party cookies. Storefront Preview won’t work if you don’t enable third-party cookies.

• 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.
• 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 to preview SFRA pages.

To use Storefront Preview:

1. In Business Manager, click App Launcher 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.

   

   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.

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 STOREFRONT_PREVIEW_DEBUG=1 to your MRT environment.

You can use MRT tail logs to read the Storefront Preview logs.