Preview the entire customer journey before your storefront launch

One of the hardest parts of reviewing a storefront is knowing whether the experience still works after the homepage is finished. A shopper does not stop at the hero section. They open the cart, continue to checkout, sign in, revisit orders, and interact with the details that make the store feel trustworthy.

Stoify's storefront builder now gives teams a contained way to review that journey. The new customer preview and temporary cart workflow connects visual editing with realistic storefront navigation while keeping production customer, cart, payment, and order state out of the test.

Choose a customer, or preview as a guest

The builder top bar includes a searchable preview customer picker. A merchant can choose a site-scoped customer by name and email, inspect the experience as that person, and return to guest preview at any time.

The preview identity is not the same as the existing production customer impersonation flow. It is tied to a validated builder preview session and the active site, so the selected customer cannot be used to reach another site's records. The dashboard user's real storefront cookies remain unchanged.

That distinction matters during review. It lets a team answer questions such as:

• Does this customer's account overview show the right information?
• Do orders, returns, reviews, wishlist items, downloads, or stock alerts look correct?
• Does account navigation keep working when the preview moves between routes?
• Are read-only controls and unavailable mutations explained clearly?

Add to cart without creating a real cart

The preview cart starts empty and lives in sessionStorage under a key scoped to the builder preview session and selected customer. It is restored after an iframe reload, follows navigation into /cart and /checkout, and supports the interactions teams need to check:

• add to cart from product cards and product pages;
• cart sheet and cart page rendering;
• quantity changes, removal, and clearing;
• recommendations and other add-to-cart entry points; and
• switching to another customer without carrying the previous scenario over.

The cart never becomes the customer's real cart and never creates a database record. That makes it possible to build a useful checkout scenario repeatedly without cleaning up production data afterwards.

Checkout that looks like the storefront

Preview checkout now uses the active storefront theme configuration instead of falling back to unrelated builder colors. Teams can review the selected checkout layout, split checkout surfaces, customer details, cart totals, delivery summaries, and payment presentation against the same visual system used by the storefront.

Split checkout stays focused on its checkout surface, so the normal storefront top bar is not rendered above the checkout form. A clear preview notice still explains that payment and order finalization are disabled: no Stripe charge, delivery mutation, discount mutation, or order will be created from the builder.

Edit the global parts of the storefront too

The builder's selection model now treats the header and footer like any other editable surface. Hovering gives a blue outline, and clicking anywhere near a global surface selects it and opens the matching inspector. This is especially useful for layouts where the clickable content is separated by large areas of background or media.

Supported text can be edited directly on the canvas, including a text-only header or logo-and-text brand treatment, footer copy, and payment marks. The footer remains a real part of the storefront rather than a static strip that has to be found elsewhere in the dashboard.

Newsletter inputs are also interactive in preview. Their responsive layout, input styling, and spacing can be tested without sending a newsletter signup to production. Preview submissions simply explain that the interaction is disabled for the review session.

A calmer launch checklist

This workflow turns a storefront review into a repeatable checklist:

1. Select guest preview or a site-scoped customer.
2. Open the routes and account states that matter for the launch.
3. Add representative products and inspect /cart and /checkout.
4. Check the checkout theme, responsive surfaces, and disabled payment state.
5. Click the header and footer, then refine global text and content inline.
6. Switch customer scenarios knowing that each preview cart is isolated.

The result is a closer representation of the customer journey with a clear safety boundary around production state. Read the full feature overview for the complete preview, cart, checkout, and inline-editing details.