How To Add Custom CSS Styling To Your Shopify Theme
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.
Choose the theme which you want to edit from the theme library
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'
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
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.
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.
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
