How to add a custom CSS file to Shopify in Liquid?

Tweet LinkedIn
CSS

Though Shopify supports adding custom CSS inside every page on most themes out there via dedicated sections inside the theme customizer if you like to stay organized like me, adding code inside the theme customizer creates clutter and in my opinion is not the proper way to add custom styles to your theme.

This is why in this tutorial I’ll show you how to link a CSS file to your Shopify theme and add all your custom code inside this file.

For the purpose of this tutorial I’m going to use the default Shopify theme which is “Dawn”.

Create the CSS file

If you want you can create a CSS file locally on your computer containing the custom styles that you want to apply to your Shopify store.

You can use any text editor to create the CSS file, and it should have a “.css” extension. I recommend VS Code.

To follow best practices I recommend calling this file: “theme-custom.css”.

Usually most themes have the main CSS file called: “theme.css” so naming your file “theme-custom.css” will help differentiate your custom files from the theme files.

This will also help the next developer that comes after you to work on the theme, especially in cases when he doesn’t have access to the theme repository.

On a sectioned theme you could see sectioned CSS files that will be loaded on each section directly. 

Doing that will load the file only if that section is loaded.

One such case is the Dawn theme which I’ll use for this tutorial.

If you do not want to complicate things and create a file locally, no worries Shopify allows you to create a file inside the cloud code editor.

You do not need to minimize the CSS file, Shopify will do that automatically when the file is requested by the client.

Upload the file

After you’ve created the file, you need to upload the CSS file to your Shopify store.

Go to the Shopify admin, login inside and go to the “Online Store” menu item (marked with 1 in the image below), the “Themes” menu item (marked with 2 in the image below) will be auto selected:

Shopify themes page.
Shopify themes page.

Go to the “…”(3 dots) button (marked with 3 in the image above) and select “Edit code” (marked with 4 in the image above).

Now the Shopify code editor will open. Look for the “Assets” folder in the left sidebar like in the image below.

In order to see the files inside the “Assets” folder click on it and click again on the “Add a new asset” link (marked with 2 in the image below):

Shopify cloud code editor.
Shopify cloud code editor.

This action will open a pop-up that will allow you to upload the CSS file created above to Shopify servers. You have 2 options: “Upload a file” (marked with 1 in the image below)  and “Create a blank file” (marked with 2 in the image below).

Upload a file

If you have the file created you can upload it by clicking the “Add file” button (marked with 3 in the image below):

Add a new file pop-up in the cloud code editor.
Add a new file pop-up in the cloud code editor.

Create the CSS file

If you didn’t create the file you have the option to do it here on the Shopify code editor by clicking the “Create a blank file” (marked with 1 in the image below):

Create a new CSS file in the Shopify cloud code editor.
Create a new CSS file in the Shopify cloud code editor.

In order to create the CSS file select the extension which in this case should be “css” (marked with 2 in the image above) and name the file “theme-custom.css” (marked with 3 in the image above).

When done click on the “Done” button (marked with 4 in the image above) and you’re done.

The new CSS file is created.
The new CSS file is created.

Now you can add any custom CSS code as you please.

You can do it here inside the Shopify editor or pull the file inside a local environment via Shopify CLI in order to edit the file with a code editor like VS Code.

Do not close the Shopify code editor since we are not done yet.

You have the CSS file created but for it to work and for Shopify to know that a custom CSS file needs to be served you need to tell that to Shopify.

This is why now, you need to link the CSS file to Shopify.

To do that we need to find the theme index file which is the “theme.liquid”.

Inside the Shopify code editor go to the “Layout” folder (marked with 1 in the image below) and click on the “theme.liquid” file to open it.

Add the following code (marked with 3 in the image below):

{{ 'theme-custom.css' | asset_url | stylesheet_tag }}

I recommend adding the code below the rest of the CSS code links inside the header to keep everything in order.

In the example below I’ve put my custom CSS file below the “base.css” file.

When all is done click the “Save” button to save your changes.

Integration of the CSS tag inside the Shopify theme.
Integration of the CSS tag inside the Shopify theme.

Test the CSS file

Test the file to make sure that Shopify loads it in the front-end.

Go to your store front-end and open the developer tools by pressing   + Option + I on MAC or F12 or CTRL + + I on Windows or Linux. These shortcuts are for Chrome browser.

After you’ve open the dev tools, reload the page by pressing + + R ( on MacOS ) or CTRL + F5 or CTRL + + R (on Windows or Linux ) to do a hard reload.

Now go the “Network” tab (marked with 1 in the image below), select the CSS profile (marked with 2 in the image below) and type in the “Filter” box (marked with 3 in the image below)  the name of your CSS file which in this case is “theme-custom.css”.

CSS file verification in the Chrome Developer Tools.
CSS file verification in the Chrome Developer Tools.

You should see the file (marked with 4 in the image above) but that doesn’t mean the file loaded correctly. 

This is why you need to check the “Status”. If the status is 200 (marked with 5 in the image above) then your file is loaded and whatever styles you add will work correctly.

Conclusion

Creating and linking a CSS file to your Shopify store is the best way to customize your store’s appearance.

By following the steps outlined above, you can easily create a CSS file, upload it to your Shopify store, and link it to your store.

With your custom CSS file linked to your store, you can now apply custom styles to your Shopify store and make it stand out from the competition.