Storefront Preview

A sandboxed preview of how the Parts Diagram block looks on a product page — without having to publish changes to your live theme first.

Open via Storefront Preview in the sidebar.

When to use it

• After tweaking Storefront settings — see the layout and toggles in action.
• After remapping a hotspot — confirm the variant selector shows the right options.
• Before bulk-assigning a diagram across a collection — preview on one product first.
• When troubleshooting — the preview runs against the same data the storefront uses but inside the admin, so it's easier to inspect.

What the preview is (and isn't)

The preview renders the storefront block in an iframe inside the admin, loading:

• The current diagram for the selected product.
• The latest Storefront settings (no theme publish needed).
• The same live Shopify pricing / stock data the real storefront uses.

It does not:

• Run inside your actual theme template — so theme-specific styles (custom fonts, headers, etc.) are not applied.
• Charge any real cart actions. Adding to cart inside the preview shows the success state but doesn't post to your store's cart.
• Track analytics events (preview sessions are excluded from the analytics dashboard).

Using the preview

1. Pick the product with the picker at the top.
2. The preview iframe loads with the assigned diagram(s).
3. Toggle the Layout dropdown to compare side / overlay / popup variants without committing the change to settings.
4. Click hotspots to see the popup behavior, variant picker, and add-to-cart UI exactly as a shopper would.

When you're satisfied, save the change in the relevant settings page — the preview is read-only: it never writes to your store.