The Easiest Way To Minify Your Shopify CSS That’s Built Using Liquid Variables

We built out a Shopify Plus site for a client that has a number of settings for their styles in the actual theme file. While that’s really advantageous for easily adjusting styles, it means that you don’t have a static cascading style sheets (CSS) file that you can easily minify (reduce in size). Sometimes this is referred to as CSS compression and compressing your CSS.

What is CSS Minification?

When you’re writing to a stylesheet, you define the style for a particular HTML element once, and then use it over and over on any number of web pages. For example, if I wanted to set up some specifics for how my fonts looked on my site, I might organize my CSS as follows:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Within that stylesheet, each space, line return, and tab take up space. If I remove all of those, I can reduce the size of that stylesheet by over 40% if the CSS is minified! The result is this…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS minification is a must if you want to speed up your site and there are a number of tools online that can help you compress your CSS file efficiently. Just search for compress CSS tool or minify CSS tool online.

Imagine a large CSS file and how much space can be saved by minifying its CSS… it’s typically a minimum of 20% and can be upwards of 40% of their budget. Having a smaller CSS page referred throughout your site can save load times on every single page, can increase your site’s ranking, improve your engagement, and ultimately improve your conversion metrics.

The downside, of course, is that there’s a single line in a compressed CSS file so they’re incredibly difficult to troubleshoot or update.

Shopify CSS Liquid

Within a Shopify theme, you can apply settings that you can easily update. We like to do this as we test and optimize sites so that we can just customize the theme visually rather than digging into the code. So, our Stylesheet is built with Liquid (Shopify’s scripting language) and we add variables to update the Stylesheet. It may look like this:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

While this works well, you can’t simply copy the code and use an online tool to minify it because their script doesn’t understand the liquid tags. In fact, you’ll totally destroy your CSS if you try! The great news is that because it’s built with Liquid… you can actually USE scripting to minify the output!

Shopify CSS Minification In Liquid

Shopify enables you to easily script variables and modify the output. In this case, we can actually wrap our CSS into a content variable and then manipulate it to remove all tabs, line returns, and spaces! I found this code in the Shopify Community from Tim (tairli) and it worked brilliantly!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

So, for my example above, my theme.css.liquid page would look like this:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

When I run the code, the output CSS is as follows, perfectly minified:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

© 2021 DK New Media, LLC, All Rights Reserved