The Live Preview System

Live Preview lets you see a working preview of the page, product page, or website area you are editing without leaving the builder.

Instead of repeatedly saving changes and refreshing the public website, Live Preview gives you fast visual feedback inside the builder. This makes it easier to evaluate content, layout, styling, and responsive behavior while you work.

How Live Preview Works

Live Preview sits between editing and saving in the builder workflow. Live Preview updates automatically when builder output changes.

1. Edit content or styling in the builder.
2. The builder generates updated output.
3. Live Preview displays the updated output.
4. Continue refining the page.
5. Save your changes.
6. Verify the final result on the front-end.

Info: Live Preview can display unsaved changes, but visitors only see changes after they have been saved and made available to the front-end.

Preview Width and Device Modes

Live Preview includes responsive testing tools that help you evaluate layouts at different screen sizes.

The most important setting is the Reference Width. This determines the width used for layout calculations. The preview will be visually scaled to fit inside the available panel space, but the layout still behaves according to the selected reference width.

The device buttons are shortcuts for common preview widths:

• Base: returns to the custom reference width you set.
• Desktop: previews a wide desktop layout.
• Tablet: previews a tablet-sized layout.
• Mobile: previews a phone-sized layout.
• Small Mobile: previews a very narrow phone layout.

For example, a 1200px desktop layout may appear scaled down inside a narrower preview panel. Although the preview looks smaller, the layout is still being calculated at 1200px.

Important: Always test layouts across multiple device sizes. A section that looks correct on desktop may still need adjustments on tablet or mobile.

Preview Environments

Live Preview supports the same environments used throughout the builder. The selected environment determines what content is available inside the preview and how changes are rendered.

• Home and Pages: preview standard pages, landing pages, and page-based content.
• Products: preview product-page layouts and product-specific content areas.
• General: preview shared website elements such as headers, footers, global sections, and broad styling settings.

Important: If the preview does not show the area you expect, verify that the correct environment is selected.

Previewing General Settings

General settings often affect multiple areas of the website. Because of this, the General environment may include an environment switcher that lets you preview how shared settings affect Pages or Products.

When previewing another environment from General, you may need to select a specific page or product as the preview target.

Previewing Products

Product previews include product-specific areas such as product media, summaries, pricing, traits, FAQs, and calls to action.

Depending on the configuration, the preview may use placeholder content or a selected product while editing. This gives the builder a stable preview environment even when all dynamic product data is not available.

Warning: Always verify important product changes on the live product page after saving, especially when working with dynamic data, variations, checkout functionality, or third-party integrations.

Section Focus and Highlighting

Live Preview can help connect builder controls to their matching page sections.

When a section is selected in the builder, the matching area in the preview may be highlighted. This makes navigation easier on longer pages.

In some cases, selecting something in the preview can also help focus the matching builder area.

What Live Preview Shows Well

Live Preview is best suited for changes editors make repeatedly while building a page.

• Content changes: headings, descriptions, buttons, images, repeaters, and local fields.
• Section order: how the page flow feels as sections move up or down.
• Layout adjustments: spacing, grid gaps, content width, and alignment.
• Styling changes: colors, typography, buttons, backgrounds, borders, shadows, and custom CSS.
• Responsive behavior: how sections change between desktop, tablet, mobile, and small mobile.
• Shared styling effects: how broad General, Pages, or Products styles affect the selected preview target.

What Live Preview May Not Show Perfectly

Live Preview is powerful, but some features can behave differently from the real front-end because they depend on saved output, live context, or external scripts.

• Saved-state behavior: visitors see saved output, while Live Preview can show unsaved builder output.
• Dynamic data: product data, customer data, shortcodes, forms, cart behavior, and checkout behavior may depend on real front-end context.
• Third-party scripts: some scripts may behave differently inside a protected preview frame.
• Caching: the public website may still show older CSS or older generated output until cache is cleared or refreshed.
• Exact browser space: the preview can scale a layout to fit the panel, so always pay attention to the selected reference width.
• Other Screen sizes: while you can select different screen sizes, they are still fixed so the specific sizes on the panel. One method to mitigate this is to set the Reference Width to the exact screen size you want to view.

Warning: Live Preview should not replace final front-end testing.

Saving and Front-End Verification

Live Preview and saving are related, but they are not the same thing.

• Live Preview displays the builder’s current state.
• Save publishes changes to the site’s generated output.
• Front-end review confirms the visitor experience.

Important: A change that appears correct in Live Preview is not available to visitors until it has been saved.

Recommended Workflow

For the most reliable results, use this workflow:

1. Open the correct builder environment.
2. Open Live Preview.
3. Select an appropriate reference width.
4. Make content or styling changes.
5. Review the preview.
6. Test Desktop, Tablet, Mobile, and Small Mobile layouts.
7. If editing General settings, preview Pages or Products when relevant.
8. Save your changes.
9. Verify the final result on the live front-end.

Using Live Preview throughout the editing process helps catch layout and styling issues early while reducing the need for repeated save-and-refresh cycles.