Safely modify the CSS of your Shopify theme

Summary

Our goal through this article is to help non-developers understand how modify the CSS of your Shopify theme safely.

What is a CSS style sheet?

Let's go over the basics in a few words ...

Alors que le HTML is there to create the structure of a website, cascading style sheets ou CSS are used to define the visual rendering of it.

Example: a button is made from HTML but the fact that it is green is due to CSS.

HTML vs CSS

Now that we have defined what CSS is, we will see how to modify it or add it safely to its Shopify theme.

Make a backup

Before touching anything, it is important to make a backup of the current version of its theme. Indeed we will prefer to work on the copy rather than on the published version.

To create a backup, we will duplicate the published version of its theme by performing the following actions: Online Store> Themes> Actions> Duplicate.

Duplicate a theme

Note: you can also use our app GoBack to easily save your theme.

Info: Always work on the backup, even for small changes. This avoids bugging the online version and allows you to better follow theme changes.

Edit the code of your Shopify theme

The theme being duplicated correctly, we will be able to modify its copy.

To do this, click on it then on Edit code.

Edit code

Now that you are in the code of your theme, we are going to look at 2 files:

  • theme.liquid
  • custom.scss.liquid

theme + custom css

theme.liquid = the main file that is loaded with each page.

custom.scss.liquid = custom CSS file that overrides the base theme style.

Don't have a custom CSS file?

Add a new asset with an empty file called custom.scss.liquid.

Then integrate it in theme.liquid, under the file theme.scss.css, like the screenshot below:

custom.scss.liquid

Code to insert: {{'custom.scss.css' | asset_url | stylesheet_tag}}

asset_url

Once this is done, you can start adding CSS changes in custom.scss.liquid.

Info 1: Order is important. By placing it under the basic CSS of your theme, your custom CSS will replace the basic CSS rules.

Info 2: By using .scss instead of .css, your CSS code will be automatically compressed on the server, which will make your file lighter.

Info 3: In some themes, the basic CSS can take the name styles.scss.liquid or default.scss.liquid instead of theme.scss.liquid.

Why not just add CSS to the end of theme.scss.liquid? 

You can do that, but if you later update your theme, all of your custom edits might get erased. Having your custom CSS in a separate file is safer and easier to edit / organize.

Comment your code

It is important to add comments to the code blocks so that other people, or you later, know what this code is doing.

To comment, it's very simple: we surround our comment with / * and * /.

Example:

/* Couleur prix page produit */
.product_price {
color:black;
}

The final word

You now have all the cards in hand for safely modify the CSS of your Shopify theme. Also remember to make regular backups or use an app that will take care of it for you like GoBack.

Leave a comment

Please note that comments must be approved before posting