How to edit the CSS of your Shopify theme

When you work with Shopify you may need to edit the CSS files a bit. For example to modify text size on the home page carousel, or even changing the colour of hero text.   As a well-developed platform, Shopify has a hassle free CSS update options. This post simply guides you to edit the CSS of your Shopify theme.

How to edit the CSS of your Shopify theme

1) Login to your Shopify admin

2) On the left sidebar click on the Online Store

 How to edit the CSS of your Shopify theme

3) You will be on the Themes by default. Click on the button Actions on your published theme and then Edit HTML/CSS.

 How to edit the CSS of your Shopify theme

4) You can see a list of supporting files used in the left pane. Scroll down till Assets. This is where your CSS files located. Modern themes use SCSS, so it may look something like this: “style.scss.liquid or theme.scss.liquid. In my theme, it’s theme.scss.liquid. Just click on it, on the right side the CSS editor will open and you can update your CSS there.

 How to edit the CSS of your Shopify theme

 

Note: To avoid interfering with existing Shopify CSS, you can create a new CSS and customise it. Create it as the last item so it will override the existing listed CSS files.

Editorial Staff
 

Editorial Staff at tutsplanet is a dedicated team to write various tutorial articles.