How To Add Custom CSS Styling To Your Shopify Theme

1min
September 5, 2022

If you're a web developer or into Shopify Theme Development, you'll probably need to add in extra custom CSS to style the Shopify template pages to your desired looks.

So how do you go about adding a new style sheet into Shopify? There's 3 easy steps. Let's go over that now.

Step 1: Head over to theme code

Head to your Shopify online store >>> then themes.

How To Add Custom CSS Styling To Your Shopify Theme

Choose the theme which you want to edit from the theme library

How To Add Custom CSS Styling To Your Shopify Theme

Step 2: Create a CSS stylesheet

💡 Some themes may already have a custom CSS stylesheet. It's probably worth using the search function to look for "custom" with a .css extention. If you spot this it means you already have a custom stylesheet & there's nothing left for you to do.

Head to the "Assets" folder >>> press 'Add a new asset'

How To Add Custom CSS Styling To Your Shopify Theme

A popup will appear. Here you should 'create a blank file'.

Then choose the CSS extension.

Then add a name. 'custom' is probably the easiest

How To Add Custom CSS Styling To Your Shopify Theme

Step 3: Link the CSS stylesheet to the liquid code

If you've made it to step 3, you've got a clean new stylesheet in your assets folder. You can get stuck in writing CSS code but when you save, you won't see any effect on the website.

That's because you've not linked the stylesheet to the theme liquid code. Normally in html you would used to adding code like this: <link rel="stylesheet" href="styles.css"> to the <head> of your html sheet. We need to do something similar for Shopify in order to tell it where to get the extra styles from.

Head over to your theme.liquid file. You can find that using the search bar or in the 'layout' folder.

How To Add Custom CSS Styling To Your Shopify Theme

Then use the CTRL + F to search the theme.liquid for "stylesheet_tag". It should be in the <head> section of the code.

You should find a Shopify line of code with another link to the base CSS stylesheet. Duplicate (Copy & paste) that line right below it. Then change the text from base to custom or whatever you named it.

How To Add Custom CSS Styling To Your Shopify Theme

If you can't find the line of code from the search. Then just copy this code: {{ 'mysheetname.css' | asset_url | stylesheet_tag }} and paste it imbetween the <head> </head> tag.

Other helpful tips

If you're making edits and no seeing changes then use an !important tag at the end of the style command.

For example: .header {padding-top: 0px !important;}

This simply ensures that your code has priority over the code already written

Please let us know if that was helpful. That's all for now.

At CHU we build & optimize Shopify stores.

Book a FREE audit of your website here

Get in touch with us at victor@chudigital.com

Updates Straight To Your Inbox - 2x a week
* indicates required
© CHU DIGITAL LIMITED | Company Number: 14352740

Partnered with Step Labs