{% stylesheet %} The CSS inStarting April 20, 2026, Shopify will deliver only the CSS related to the sections / blocks / snippets actually rendered on each page. The old approach of loading all CSS on every page is going away. Self-contained themes need no changes, but if you reference classes across files, styles can go missing.
{% stylesheet %} CSS written inEverything bundled together on every pagewas being delivered.All {% stylesheet %} CSS was delivered on every page load regardless of content. Unused CSS was shipped along with the rest.
Only the CSS related to the section / block / snippet rendered on that page is delivered. Unnecessary CSS is reduced, making the page lighter.
{% render %} the direct children called via that method are rendered together with the parent, so their CSS is also delivered together. The problem case is when you rely on "CSS from files that aren't rendered".Each file's {% stylesheet %} only targetsHTML elements in the same fileor{% render %} directly nested children referenced withis the only thing being styled. → Already compatible. Nothing needs to be done.
In one file, {% stylesheet %} defines a class, butan unrelated separate fileuses it on an HTML element. → Styles won't apply on pages where the definition isn't rendered. This isthe pattern you should find and fix.
| How CSS classes are used | Behavior on and after 4/20 | Action needed |
|---|---|---|
| Applies only to elements in the same file | Works as is | None |
{% render %} Applies to direct children called with |
Works as is(Delivered together with the parent) | None |
| Applies to elements in unrelated separate files | Risk of missing styles(Page where the definition source isn't rendered) | Fix required |
Reducing the article's explanation to a typical structure looks roughly like the following (code is a schematic example for understanding).
section-promo is not rendered (e.g., product-card only this page is rendered) .badge-sale the CSS forisn't delivered, so the red color and bold styling aren't applied. This is the "classes used in other unrelated files" issue the article describes.{% render %} ", then whenever that file is rendered the CSS is guaranteed to ship with it, so it won't go missing.{% stylesheet %} Across all theme files, check whether class names defined in are being used in HTML files other than the one where they are defined.
Move the relevant classes into the consuming file's {% stylesheet %} or{% render %} restructure them so they stay scoped within a parent-child relationship.
Preview pages such as product, collection, and cart to check for layout issues on pages where the defining file isn't rendered.
Shopify will progressively enable this starting April 20, 2026. It's not opt-in — the behavior itself changes, so finish your audit and fixes before then.
Delivery targets the CSS associated with the section / block / snippet rendered on that page. Files that aren't rendered {% stylesheet %} won't be loaded.
{% render %} Children invoked via this method are rendered at the same time as the parent, so the child's CSS is bundled together. A design closed within parent-child is safe.
The single point of failure is where a class is reused in a file unrelated to its definition source. CSS goes missing on pages where the definition source is not rendered.
Since the impact appears on "pages where the definition source is not rendered," check multiple templates such as product / collection / cart / search via real-device preview. For specific fix procedures, refer to the stylesheet subsetting documentation the article points to (the article body containsno detailed steps or URL).
{% stylesheet %} with the class usage on the HTML side, and list out locations where the definition and usage live in separate files.{% render %} . If self-contained, no action is needed.{% render %} scoped to its children." Reject cross-file references at review time.{% stylesheet %} CSS foris delivered only for the elements rendered on the page.{% render %} If they are scoped within children of this element, no changes are needed.