Skip to main content

Preview Faslet Components

Use component preview to check the appearance and placement of Size Me, Try On, and FitBar on a product page, even when a component would normally be hidden. This is useful while implementing or styling your storefront integration, before a product or feature is enabled.

Enable preview on a product page​

Keep the normal storefront integration installed, including the Faslet script and a visible <faslet-app> element. Add ?faslet.preview to the product page URL, then load the page:

https://your-store.example/products/jacket?faslet.preview

If the URL already has a query string, append &faslet.preview instead:

https://your-store.example/products/jacket?variant=123&faslet.preview

The parameter with no value previews all three components. You can also select components by name:

  • ?faslet.preview=sizeme — Size Me button and example size result.
  • ?faslet.preview=tryon — Try On button.
  • ?faslet.preview=fitbar — FitBar.
  • ?faslet.preview=sizeme,fitbar — Size Me and FitBar together.
  • ?faslet.preview=all — all three components.

You can repeat the parameter, for example ?faslet.preview=sizeme&faslet.preview=tryon. Component values are case-insensitive and whitespace around each value is ignored. Unrecognized values do not select a component.

What to expect​

Preview adds a non-functional fallback only for a selected component that would otherwise be hidden. A component that is already visible and functional keeps its normal behavior; preview is not a sandbox that disables live functionality.

  • The Size Me fallback displays an example size M, not a real size recommendation.
  • The FitBar fallback displays an example fit rating, not product-specific fit information.
  • Clicking a fallback shows the message: “This is a preview component and will not work.” It does not open the real Size Me or Try On flow.
  • Components that you did not select retain their normal visibility and behavior. Selecting only Size Me, for example, does not hide an already-enabled Try On button.
Preview does not validate a live integration

A visible fallback does not mean the product is connected, the feature is enabled, or recommendations and add-to-cart work. Preview does not activate products or change store configuration. Remove the preview parameter and complete the Integration Checklist with an enabled product before going live.

If a component is still not visible​

Preview still needs the Faslet script to run and the page to provide a visible place to render the components. It does not override CSS that hides <faslet-app> or an ancestor. Check your integration and any configured placement selectors.

If your integration uses buttonless mode, the built-in Size Me button stays hidden, including in preview. Preview does not override this setting.

For the normal reasons a component is hidden, open the browser developer console and reload the product page. The Widget hidden: diagnostic includes visibility details and a reminder of the preview parameter. See also The button isn't showing, how can I see why?.

To leave preview, remove all faslet.preview parameters from the URL and reload the page.