How to edit style (CSS/SCSS) in your Shopify theme

Some of my tutorials here in my blog or even on other Shopify source require you to edit theme style (CSS/SCSS) in your theme. If you have not ever edited or worked with it before, you might get a small hesitate. So in this article, I just simply show you how to find and edit theme style file.

How to edit style (CSS/SCSS) in your Shopify theme

1. Access Theme editor area

From Shopify Dashboard, navigate to your Theme editor

Edit theme code in Shopify Debut Theme

2. Find style CSS file

From left side, type in css and look at Assets folder, you will see all files end with extension .css, .css.liquid, .scss, .scss.liquid listed here. Your theme style file might look something like this style.scss.liquid or theme.scss.liquid. Open that file up

Find your theme style file

3. Add custom CSS/SCSS to your theme style

After you open that file, scroll down to bottom of file and paste custom style here.

Remember to scroll down and paste custom style to bottom of the file. Because when you add custom code to top of file, some unwanted issue might comes.

Conclusions

Hope that my small tutorial can make you fell easier every time you need to edit or add a small code of style to your theme.

Thanks for reading my blog! If you have any suggestion, please comment, I am very happy to hear from you.

Add Comment