Why do pages in the Editor look different than the published page?

If you've noticed that your page looks one way in the Editor but appears differently after publishing, you're not alone! There are a few common reasons why this happens:

Placeholder Display for Components

Integration, Section , Liquid , and HTML Components show placeholders instead of rendering fully in the Editor. This ensures better performance and stability, as these elements rely on external factors that are only fully available on the published page.

If you need to make specific styling adjustments, use the 'Custom CSS' option in the page settings panel. This allows you to apply styles directly to your pages without needing them to be fully rendered in the Editor.

Why Does the Size of Some Elements Look Different?

Certain sizing inconsistencies may occur if styles use relative units like rem, vh, or vw instead of fixed pixel values.

How to Adjust Sizing:

• For rem units: If your theme has a custom root font size, the Editor may display different proportions. Setting the root font size to 16px or converting rem to pixels can help.

• For vh or vw units: These are based on viewport dimensions, which can vary. Using % or fixed pixel values instead will provide more consistent results.

Why Does the Layout Look Different or Have Extra Padding?

The Editor now accounts for any horizontal padding that exists within your theme, which may cause the layout to appear slightly different compared to the published page.

How to Adjust Layout:

1. Reach out to support via the chat. They may be able to add a configuration to help.

2. Apply Custom CSS in the element settings panel to refine the padding and layout appearance.

If you notice any unexpected differences or need further assistance, please reach out to our support team—we’re happy to help!