Check the Atlas Page Builder app embed first. It loads the styles and scripts Atlas pages need, and without it a page renders as unstyled content: the right words in the wrong shape. That accounts for most cases where the published page and the preview do not match.

In this article:

On your Atlas dashboard, look at the Theme extensions card. Atlas Page Builder must show Active on your published theme.

If it shows Inactive, select Activate, then press Save in the theme editor. This alone usually resolves a page that looks structurally broken: sections stacked oddly, images the wrong size, spacing gone.

See How to enable the Atlas Page Builder app embed.

Use Publish again on the page row.

Republishing rewrites the page into your theme and moves it onto the current version of the Atlas page assets. If the page was published a long time ago and has started rendering oddly, this is often the fix.

Your theme's own CSS applies to Atlas pages too, because they live inside your theme. A theme with strong opinions about headings, buttons or spacing can override what you saw in the preview.

Signs of this: fonts are wrong but the layout is right, buttons look like your theme's buttons rather than the ones in the preview, or headings are a different size throughout.

This is usually cosmetic rather than broken, and often desirable, since it makes the page match your store. If a specific element looks wrong, adjust it in the Atlas editor and republish.

Apps that inject styles or scripts into every page can affect Atlas pages.

Common culprits: page speed optimisers that defer or combine CSS, cookie banners, currency converters, and font loaders.

Test by disabling them one at a time and reloading the published page. A page speed app is the most likely single cause, because deferring or minifying CSS can change when Atlas styles load.

Fonts. Atlas pages can specify a font family, but they can only use fonts your theme actually loads. A font that appears in the preview may fall back to something else on your storefront if the theme does not load it.

Colours. The Atlas editor's palette applies to the page. If your theme applies its own colours to certain elements, notably buttons and links, those can win.

Both are worth adjusting in the Atlas editor and republishing rather than fighting your theme.

Check the mobile preview in the Atlas editor first, since the desktop and mobile previews can differ significantly.

If the editor's mobile preview looks right and the storefront does not, the cause is usually your theme's own responsive rules, or a section on your theme that constrains width differently from the preview.

Test on a real phone rather than a narrowed browser window. Browser resizing does not reproduce every mobile behaviour.

The preview renders the page as Atlas built it. Your storefront renders it inside your theme, alongside your header, footer, apps and styles.

Some difference is expected and usually welcome: the page picking up your theme's fonts and colours is what makes it look like part of your store rather than an insert.

The difference to worry about is structural: missing sections, broken layout, images at the wrong size, or no styling at all. That is the app embed, and step 1 fixes it.

Start a chat from the bubble in the bottom right of Atlas, or email support@helloatlas.io. Either way, include:

The two screenshots side by side are the most useful thing you can send.