YellowWebMonkey Web Design

custom_SCSS_1.png

How to create a custom stylesheet in your Shopify Store

It is often necessary to add custom styling to your Shopify theme. If you add it to your theme.scss.liquid and the theme is updated you will lose all of your changes. So we create a new SCSS file to keep all the custom styles nice and safe as well as much easier to edit.  

1. Create a new asset for CSS styling: custom.scss.liquid

This is where we are going to put all our custom CSS styles

2. Connect new asset to the theme

We need to link to theme.liquid so the custom styles show on our website

Go to Layout > theme.liquid and scroll down until you see

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

Underneath this add

{{ 'custom.scss.css' | asset_url | stylesheet_tag }} 

Screen Shot 2020 07 15 at 6.05.40 PM

3. Testing our CSS styles

Now let’s add some custom CSS to check everything is working correctly. I always like to check by changing the background to red so it’s nice and easy to see that our CSS is working:

body {background: red;}

4. Preview the CSS changes

Go and preview the website. You can see there’s a red background on the website which means now anything that we modify inside the custom CSS is going to make modifications to our website

(insert image red-background)

 

* Don’t forget to remove the background code we added and then you are ready to style your website – have fun!

Scroll to Top