Liquid internal CSS

Store Design
1

Hello,

I’m trying to add some CSS to my sections, and I see there are three possible ways to wrap CSS code in Liquid:

  • The standard tag
  • The {% style %} tag in Liquid
  • The {% stylesheet %} tag in Liquid

However, I haven’t found a clear definition of the differences between these options. Even ChatGPT mentions that {% style %} and {% stylesheet %} aren’t supported in Liquid, which is a bit confusing since they are supported and used. Can someone explain the differences between these options?

Thank you in advance!

1 Like
2

Hi @Shamil_1

Stylesheet are use in the sections. You cannot use it in the theme.liquid. This is section specific. You can check the stylesheet documentation.

The {% style %} is basically the same with . It creates a style tag. You can check the style documentation.

1 Like
3

@Shamil_1
Hi there,
Foladun here from the Deluxe App team. :waving_hand:

You’re right; the three tags serve different purposes, and the {% stylesheet %} tag can be particularly useful for optimization.

1. Standard Tag:

  • Use this for plain static CSS.

2. {% style %} Tag:

  • This creates an HTML tag and allows dynamic updates in the theme editor. When using Liquid variables, the CSS rules update live without refreshing the page while you’re previewing changes.
  1. {% stylesheet %} Tag:
  • This is for section-specific styles. You can only use it once per section. It’s especially helpful to avoid repeating the same CSS styling for each instance of a section when you have multiple instances on the same page. All styles from this tag are automatically combined into a single CSS file by Shopify. You need to use this tag only if your section is meant to be installed on multiple themes or shops. Otherwise, you should include the CSS styles that your section needs in your theme’s assets directory.

To sum up:- Use for static CSS.

  • Use {% style %} for dynamic updates in the theme editor.
  • Use {% stylesheet %} to avoid duplicating styles for multiple instances of a section on the same page when the section is used on multiple stores or themes.

It was pretty misleading for me as well the first time a came across these tags, but understanding the differences can really show their usefulness!

Hope that helps clarify things!

Cheers,
Foladun | Deluxe: Account & Loyalty

From the docs:
https://shopify.dev/docs/api/liquid/tags/style
https://shopify.dev/docs/api/liquid/tags/stylesheet
https://shopify.dev/docs/storefronts/themes/architecture/sections/section-assets#stylesheet

2 Likes
4

@Deluxe-Foladun
Hello,
thank you for the detailed information!

When I use the {% style %} tag, are the CSS styles inside that tag scoped only to the section where it’s used? And when I use {% stylesheet %}, are those styles globally available across the entire site?

Also, how does this compare to using the standard html style tag?

5

@Shamil_1

Hi there,

Thanks for your follow-up questions!

1. {% style %} Tag: The CSS styles inside the {% style %} tag apply globally to the entire page but are intended for dynamic updates within that specific section. If you want to scope styles manually, you can use Liquid to retrieve the section.id value and create parent classes for your rules. For example:

This way, you can ensure that your styles only apply to that specific section, such as using an ID like shopify-section-template–23924110885130__product-grid.

2. {% stylesheet %} Tag: You’re correct! Styles defined with the {% stylesheet %} tag are globally available across the entire site and should be used for sections that are intended to be installed across multiple themes or stores. This ensures consistent styling without duplication.

3. Standard HTML Tag: Similar to the {% style %} tag, the standard HTML tag applies styles globally unless you manually scope them as described above. However, it does not support dynamic updates with Liquid variables like the {% style %} tag does.

I hope this clears up your questions!

Cheers,
Foladun | Deluxe: Account & Loyalty