YellowWebMonkey Web Design

How to create a custom stylesheet in your Shopify Store

Share on facebook
Share on twitter
Share on linkedin
custom_SCSS_1.png

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!

About YellowWebMonkey

YellowWebMonkey Web design offers reliable website design, SEO and digital marketing services for Joomla, WordPress and Shopify sites. We strive to be a one-stop shop for all your web needs.

Recent Posts

Follow Us

Scroll to Top