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:
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):
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):
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):
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.
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.
Link the file to Shopify
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.
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”.
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.