How can I properly apply styles when adding new elements?

Store Design
, , ,

Topic summary

Issue: Styles defined for a Liquid element (targeted to product templates) were not applying, and the author sought a maintainable way to include larger CSS.

Resolution: Add a stylesheet attribute in the element’s schema to reference a CSS file stored in the theme’s assets folder (e.g., “stylesheet”: “storefrontDesign.css”). This ensures the styles load correctly and keeps large CSS in a dedicated file for easier maintenance.

Outcome: Problem solved by the author; no remaining open questions or disagreements.

Summarized with AI on December 31. AI used: gpt-5.
1

I’ve created a element in the following way:


{% schema %}
  {
    "name": "Push Bundles Storefront",
    "target": "body",
    "enabled_on": {"templates": ["product"]}
  }
{% endschema %}

But these styles aren’t being applied and what I’m struggling with is how can I apply these styles and can I add CSS files ? Cause styles are gonna be a lot vast in the future so it wouldn’t be practical to store them in the same file.

Thanks!

2

Well I found the solution. You can add styles to your elements by adding the stylesheet attribute to the schema of your liquid file and referencing the CSS file from the assets folder.

So this also solves the problem of having large styles cause when you get a dedicated CSS file maintaining a large amount of CSS won’t be a problem.

{% schema %}
  {
    "name": "Storefront Designs",
    "target": "body",
    "enabled_on": {
      "templates": ["product"]
    },
    "stylesheet": "storefrontDesign.css"
  }
{% endschema %}