Troubleshoot Common Storefront Preview Errors

This section provides suggested solutions for common errors that you might encounter while using Storefront Preview.

Depending on your browser, you may encounter different behavior when third-party cookies aren’t enabled.

  • Chrome: A modal appears stating “Preview is not enabled on this storefront”, and the storefront displays a SecurityError.
  • Safari: A modal appears stating “Failed to initialize Storefront Preview”, and the storefront isn’t visible.

Cause: Your browser doesn’t allow third-party cookies on https://runtime.commercecloud.com.

Suggested Solution: Update your browser settings and any extensions you may use to allow third-party cookies on https://runtime.commercecloud.com.

Error message when loading Storefront Preview: "Preview is not enabled on this storefront!"

Cause: The storefront is missing the script file that enables communication with Runtime Admin.

Suggested Solution: Follow the instructions shown in the error message window or complete the configurations in Step 4.

Response error message when clicking the Preview button:

Suggested Solution: Complete the configurations in Step 1 and Step 2.

Depending on your browser, you may encounter an error when you don’t have the correct Content Security Policy.

  • Chrome: A modal appears stating “Preview is not enabled on this storefront”, and the storefront shows an error page stating “refused to connect”.
  • Safari: A modal appears stating “Preview is not enabled on this storefront”, and the storefront isn’t visible.

Cause: Your storefront doesn’t permit Runtime Admin in its Content Security Policy.

Suggested Solution: Follow the instructions in Step 5 to correctly configure your Content Security Policy.

The initial page loaded by Storefront Preview is the domain configured as the External Hostname for the environment.

Cause: External Hostname isn’t configured correctly in your environment settings.

Suggested Solution: Configure the External Hostname in the Advanced section of your environment settings to point to the correct domain.

Response error message seen when clicking the Preview button:

Suggested Solution: Complete Step 3.

Response error message seen when clicking the Preview button:

Cause: Incorrect values in the MRT environment variables SLAS_PRIVATE_CLIENT_ID and SLAS_PRIVATE_CLIENT_SECRET or wrong SLAS private client configuration.

Suggested Solution: Complete Step 1 and Step 2.

While previewing your site after you added the onContextChange prop to the StorefrontPreview component, you may get error messages or unexpected results.

Cause: There may be an issue with the function called by the onContextChange prop.

Suggested Solution: Remove the onContextChange prop and the function it calls from the StorefrontPreview component. Then preview your site and see if the same issues occur. If they don’t, debug your function to resolve any errors. For example, you can:

  • Add the onContextChange prop and the function it calls back to the StorefrontPreview component. See Integrate with a Third-Party CMS.
  • Inspect the network activity while previewing your site and see if the fetch request is sending the expected data.

If you still have issues after removing the onContextChange prop and the function it calls, open a support case.

While previewing your site, content isn’t displayed as expected and none of the above errors occur. For example, prices don’t change based on the values you entered in Storefront Preview.

Cause: It’s possible that you didn’t complete one or more of the prerequisites.

Suggested Solution: Confirm that you’ve completed all of the prerequisites. If you did and you still encounter issues, open a support case.