How to Optimize Shopify Theme with CSS

Last updated - May 27, 2022

Great Shopify themes use CSS code to define page layout and design. However, CSS code can become bloated and affect your Shopify site’s performance. As you probably know, maximizing page load performance is critical for engagement, conversion, and revenues. In this article, I’ll discuss a few ways to optimize Shopify theme CSS, to ensure your beautiful theme does not slow down your pages.

Shopify offers a decent range of responsive themes with easy customization.

Table of Contents

Understanding CSS Preprocessing in Shopify

When browsers render your website, they rely on both HTML and CSS. It is the CSS stylesheet that determines the style and look of your Shopify eShop. However, standard CSS does not reuse code segments. This can make the process rather complicated. CSS processors help developers handle this issue.

A CSS preprocessor is a scripting language that takes syntax and converts it into standard CSS syntax. This conversion process is critical, because browsers can render only standard CSS. A notable and popular example is a preprocessor called Systematically Awesome Stylesheets (SASS), which also lets you create custom properties.

Shopify provides a built-in compiler, called CSSC, that converts SASS syntax. Here are key advantages of this compiler:

Includes variables—that let you store specific sets of values, which you can reuse throughout your files. Variables can help you significantly reduce the time spent on repetitive coding tasks.
Supports nesting—which enables you to target specific elements of your code. This can help you write code more efficiently.

How to Minify CSS on Your Shopify Theme

Minification is a process that removes redundant or unnecessary data from a website. Ideally, the process should not affect how the minified resource is handled by browsers. You can, for example, use minification to delete unused code, remove code comments and formatting, and shorten function names.

The purpose of minification is to reduce the size of a website, which should result in faster load times. Fast load times often translate into better website performance and speed. You can apply minification to HTML, CSS, and JS.

Here is a quick walkthrough of how to locate your CSS file in Shopify:

Go to the Assets folder
Locate the CSS files
In your Shopify store, go to the Sales Channel tab
Choose the Online Store option
In the drop-down menu, choose the Actions option
Choose Edit code

You should now see your CSS files. Note that any files with the extensions .sccs. or .scss.liquid were already minified. Files with the extensions .css or .css.liquid were not minified.

Here is a quick walkthrough of how to minify your CSS file in Shopify:

Open a CSS file by clicking it. For example, the file called css.test
Rename the file to custom.scss.test
Locate the place where the file is being loaded from
Change css to custom.scss

The steps above tell Shopify to compress your CSS file before it is served to your website.

CSS in Shopify: Optimization Tips

Replacing Images with CSS effects

You do not have to use background images when creating effects. Instead, you can use CSS image effects to create borders, gradients, shadows, rounded edges, and even geometric shapes. CSS effects typically require less bandwidth than images, and can be more easily modified or animated later on.

For example, you can refrain from using the @import rule, which lets one CSS file get included with another one. Here’s a basic example you should not follow:

/* main.css */ @import url("base.css"); @import url("layout.css"); @import url("carousel.css");

Instead, the @input rules should be nested. This helps the browser parse and load all files in a series.

The below example ensures that <link> tags can load CSS files in parallel. This process is much more efficient. Here’s how it might look like:

Reduce CSS Code Length

CSS stylesheets take time to look. To ensure efficiency, you should ensure your code remains at a minimum length. There are numerous ways you can do this. For example, you can avoid using HTML inline styles and organize your CSS code into small files. Once your files are organized, you can easily locate features and remove or modify them as needed. You can also try UnCss, which is a tool dedicated to helping you remove redundant code.

Modern Layout Techniques

The traditional way of defining layouts is by using the CSS float property to modify and design the padding and margins of your site’s layout. However, this technique has its issues, and has become outdated. Today, you can use CSS Flexbox and CSS Grids for layout design. Flexbox can help you design one-dimensional layouts while Grids are used primarily for two-dimensional layouts. These two techniques require far less code and are relatively simple to work with.