Skip to content

Websites · 2 min read

Live Preview with Real Products in the Store Builder

Live Preview shows your real products while you design your online store in the store builder, instead of sample products. You can click through products, pick variants, and add items to the cart without leaving the builder. Turn it off any time to go back to sample data.

Good to know

  • If your store has products, Live Preview is on by default. If it has none, it's off and sample products show.
  • Custom product details pages don't have the Live Preview toggle. They always use sample data.
  • Checkout in Live Preview is a preview only. Real-time shipping rates, taxes, multiple payment methods, and working checkout fields aren't available there. Your live store checkout isn't affected.

Use Live Preview

  1. Go to Sites > Stores.
  2. Open your store, find the page you want, and click Edit.
  3. Find the Live Preview toggle in the upper-right corner.
  4. Turn it on to use your real products.
  5. Test products, variants, navigation, and the cart.
  6. Turn it off to go back to sample products.

What you can test

Product list and product pages
  • Click from the product list to a product.
  • See real product details on the product page.
  • Pick variants.
  • Add to cart.
  • Move between store pages.
If you open the default product page directly, the builder shows one of your real products at random.
Product widgets
Featured Product, Featured Products, and Upsell widgets keep their settings. Whether they show real or sample products depends on the Live Preview toggle and which products you assigned to them.
Cart, checkout, and thank-you pages
  • Add products to the cart.
  • Change quantities.
  • Remove items.
  • Review the cart page.
  • Carry the cart into the checkout and thank-you pages.
If the preview cart is empty, checkout and thank-you pages still show a product so you can design them.

Tips

  • Test a product with several variants to check your variant selector looks right.
  • Before you launch, place a real test order on the published store to check shipping, taxes, and payment.

Did this answer your question?

No, I need help

More in Websites