Load different CSS file for different pages

Store Design
1

Hi all,

I was wondering if there’s some way to split the main theme.scss file into smaller files that hold the styling rules for specific pages, and then only loading that specific file for their corresponding page. So there would be a CSS file for the landing page, a different CSS file for the products page, etc. As it is right now, our theme.scss file is getting huge and by checking the Coverage tool in Chrome’s dev tools, I can see that 90% of the styling rules contained in theme.scss is unused for our collections pages. My goal is to reduce the amount of unused CSS in order to optimize page load times. Any advice would be appreciated!

2

Hi @uhpueirt

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Asset → create separate css file for each page contain css code.
    Ex: /theme-blog.css
  3. Snippets → create one big file to call all the smaller css files with the condition
    Ex: /head-script.liquid
{% assign pagename = request.page_type | handle %}

{% if pagename == 'blog' %}
    {{ 'theme-blog.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if pagename == 'article' %}
    {{ 'theme-article.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if pagename == 'list-collections' %}
    {{ 'theme-collections-list.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if pagename == 'collection' %}
    {{ 'theme-collection.css' | asset_url | stylesheet_tag }}
    {{ 'jquery.min.js' | asset_url | script_tag }}
{% endif %}

{% if pagename == 'cart' %}
    {{ 'theme-cart.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if pagename == 'product' %}
    {{ 'theme-product.scss' | asset_url | stylesheet_tag }}
    {{ 'jquery.min.js' | asset_url | script_tag }}
{% endif %}

{% if pagename == 'page' or pagename == 'search' %}
    {{ 'theme-page.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if pagename == 'customers-register' or pagename == 'customers-login' or pagename == 'customers-account' or pagename == 'customers-addresses' or pagename == 'customers-activate_account' or pagename == 'customers-order' or pagename == 'customers-reset_password' %}
    {{ 'theme-login.css' | asset_url | stylesheet_tag }}
{% endif %}
  1. Layout → /theme.liquid → paste code below into the tag of the file:
{% render 'head-script' %}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

Thank you for this, I’ll try it out