How to minify your Shopify store’s CSS, JavaScript files and Liquid codes

Hura Product Showcase Builder

How fast your site loads is not only important for first time visitors, but it is also important for moving search engine ranking. When you minify your website’s CSS, HTML, and Javascript files, you can shave some valuable time off of your site’s page load speed.

“Minify” term is basically used to describe the method of removing white spaces, line breaks, comments, block delimiters and other unnecessary characters from the source code. It reduces the size of the file and helps to load it faster, in turn, improves the site speed and performance. The concept of minifying is applied to all the files sent to user’s browser including HTML, CSS, and JavaScript.

In this article, I’m going to show some simple ways to minify CSS, JavaScript files and Liquid codes in Shopify.

  1. Minifying CSS on your theme
  2. Minifying JavaScript on your theme
  3. Minifying Liquid code on your Shopity store

Minifying CSS on your theme

You can see all CSS files in the Assets folder. The files have extension be .scss.liquid or .scss, that are files that have been set in optimization mode. And the files are typically not minified, their extensions are .css.liquid or .css.

Steps to minify CSS file:

  1. In this example, you would click custom.css.liquid to open this file, then rename it to custom.scss.liquid.
  2. Find where the file is being loaded. This command is usually in theme.liquid, most likely in the <head> tag.
  3. Using the same example, you’d change “custom.css” to “custom.scss.css“.
  4. Now, Shopify will compress your CSS file on their server before serving it up.

The output before – you have organized code how it looks in your editor:

The output after – you have compressed code like this:

This will greatly reduce the size of your CSS files, which will speed up the page loading times of your online Shopify store.


Minifying JavaScript on your theme

The main reason for minifying JavaScript is that it’s the fastest way to get the code to your user’s browser. Minification (minify/compress) is the process of compression code from the original size to the smallest size and does not affect to the operation of the code. The process will removes or modifies some unnecessary characters from the code. Removes characters as white space, new line, comment out code… modifies as HEX color, defined variable to minified character… Finally, all the code will on one line.

Actually, Shopify don’t support auto minify Javasript files like CSS files. So you must do that manual.

You can see all JS files in the Assets folder. You should merge all JS files to one file. After that you open this file and copy all code and you can use online JavaScript minifying tools to minify.

You need to pay attention to liquid code in javascript files because the tools don’t support for liquid code. The JS code is on one line after minify, so you can’t read to adjust. So you must back up the file before minify.

Minifying Liquid code on your Shopity store

Minifying Liquid code is minify html output. You must remove comment out codes. You must remove comment out codes and make it on one line.

In the Snippets directory, click Add a new snippet. In popup appear: Give your snippet the name minifier and click Create snippet.

In the online code editor, paste the content from the below text.

In the Layouts folder, locate and click on your theme.liquid file to open it in the online code editor.

Add the below code into before first line of this file.

Scroll down a bit until you see the closing tag. After the closing tag, paste the below code.

If you consider yourself non-technical, there are Shopify apps that minify CSS, JavaScript for you.

Hura Theme Blocks

You may also like...

2 Responses

  1. Simon says:

    hello, how can I minify my product page liquid? if better, can I minify JS and CSS as well on my product page? can I use the same method that was given on this page?

  2. David Paine says:

    Shopify is one of the important platforms that is used for e-commerce purposes. Optimizing the website is becoming an important factor in generating leads. As per the research, If an e-commerce site is making $100,000 per day, a 1-second page delay could potentially cost $2.5 million in lost sales every year. So your article is quite important is that perspective. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *