There is a recommended section under the live storefront and the editor page. The font and layout are different.
I doubt you can get any help here with this question.
No one here can see your store.
Please, share your store url and a preview password (if one is set) to get any meaningful answers.
Hi @papa241
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
password:dietai
Hmm.
This – Horizon — Quick-add modal caret icon rendering oversized on live view - #6 by tim_1 – may be a similar situation.
“Theme editor” applies CSS differently from live store and this can be a reason for what you see.
I guess Shopify has changed the logic around “compiled stylesheets” trying to optimize file sizes and it broke some things.
I’ve reported that problem to Shopify here – Horizon Theme AR Bug - #4 by tim_tairli - Online Store and Theme Development - Shopify Developer Community Forums
So, hopefully, the issue will be resolved and I’d rather recommend to wait…
Hi @papa241
The “You May Also Like” section is currently showing the same design as your collection page. Which exact design would you like there?
Best regards,
Devcoder
Is not the same. Front, layout and spacing are different,
Hi @papa241
I think you want to say that when you check the “You May Also Like” section in the theme editor/customizer, it shows 4 products, but on the storefront, it only shows 2 products.
The number of products shown is managed by Shopify’s product recommendation system, not only by the theme settings. That’s why some product pages show 2 products while others show 4.
This mainly depends on:
- Product availability
- Whether the products are active and published
- Stock status
- Sales history
- Related collections
- Shopify recommendation data
So even if the section setting is set to display 4 products, Shopify will only show the products that qualify for recommendations for that specific product page.
The design layout, fonts, and spacing will remain the same on both the theme editor and the storefront.
Thanks
You are wrong. Apart from the 4 columns, the font, layout and spacing are different. Maybe look at the picture in details first.
Anyways I already requested to Shopify team to check. They had acknowledged the issue.
tim_1 is on the right track with the compiled-stylesheet angle. Here’s the underlying mechanism that makes editor and live diverge.
The theme editor loads sections with ?_fd=0&pb=0 plus a ?preview_theme_id= query, which forces unminified CSS and disables section bundling. Live storefront uses Shopify’s CDN-cached compiled bundle that combines section-scoped CSS into a single sheet, applies content-aware minification, and strips selectors that the bundler thinks are unused. When the recommended section’s CSS lives in a snippet that’s only loaded conditionally (e.g. {%- if request.page_type == 'product' -%}) the bundler sometimes mis-classifies it and drops or reorders rules.
To confirm this is what’s happening on your store, open the live page and the editor preview side-by-side in DevTools, then diff the two computed style trees on the recommended section’s container. If you see CSS custom properties (--font-body, --gap-md) inheriting different values between the two, it’s bundler scope leakage. If the selectors themselves are missing from live, it’s the dead-code stripper.
Quick workaround: move the recommended section’s style block from a snippet into the section’s own {% stylesheet %} tag. That guarantees it ships in the section bundle and doesn’t get stripped.
Since you’ve already filed with Shopify, mention which theme + section you’re using so they can repro on Horizon vs other Online Store 2.0 themes (the bundler behaves differently across them).
Not quite like this, but the recommended solution is right (kinda the same as I recommended in the posts linked above) – move {% stylesheet %} content from snippets to section or asset files.
But this would make the theme difficult to update – therefore my previous recommendation – wait for the systemic fix from Shopify.
Yes, there is a styling difference between “Recommended products” product cards and “Collection grid” product cards, but it’s not as significant as in the post I mentioned earlier.
The parameter which ultimately forces system into “online editor” mode is oseid=XXXX.
?_fd=0&pb=0 or ?preview_theme_id= can be used elsewhere and do not force it.
When liquid code processed in “online editor” mode these areas of code
{% stylesheet %}
...
{% endstylesheet %}
are converted into
<style>
...
</style>
In live store, these areas in liquid code are removed and combined into a separate “compiled” stylesheet.
The problem here is that “recommended products” section does not process those snippets on initial render, so this CSS is skipped.
When section content is later requested with Javascript, these snippets are rendered, but it’s already too late for inclusion into compiled stylesheet for this template.