How To Add Custom CSS To Shopify (Or Edit Existing CSS)

Shopify CSS Code

You’ve got a vision of the perfect store design in your head, but no Shopify theme or anything in the Shopify app store seem to fully realize it in the way you envisioned.

Here’s how to add and edit custom CSS to customize your Shopify shop design.

How Do I Add Custom CSS To Shopify?

  1. Backup Your Site
  2. Use Inspecting Tools To Match The CSS Code To Elements
  3. Create a Custom CSS File

1. Backup Your Site

Before making any changes, create a backup of your existing theme files so you can go back if something goes wrong. It can be difficult even for the support team to restore files that have been overwritten.

Go to Online Store and open the Themes page. Select the Actions button next to your theme and choose the Duplicate option.

Shopify CSS Edit Code

2. Use Inspecting Tools To Match The CSS Code To Elements

Many businesses use CSS to customize their font size, the formatting of the products and add advanced features like real-world map and countdown timers. However, it can be overwhelming for a small business owner to figure out which part of the code to edit on their pages.

If you’re on a Windows computer, right click your webpage and select Inspect. On a Mac, press the Ctrl button and left click on the page to bring up the Inspect option. On some browsers this can be called Show Inspector or Inspect Element.

You will see a window pop up with the HTML code and CSS of the page you’re on.

Select the Element Picker option which appears as an arrow and square icon. You’ll then be able to select different parts of the page and the Elements window will jump to and highlight the CSS code that corresponds to it.

Here’s how it looks like in Chrome.

Shopify cSS Element Picker

Your browser might also show you more details that let you know everything about the element you’ve chosen.

Shopify CSS Element Picker Details

3. Create a Custom CSS File

The theme.scss.liquid is the main CSS stylesheet for your Shopify website theme. However, the file is refreshed each time the theme is updated to the latest version which can cause you to lose all your changes.

Go to your Themes page again and select Actions. Select Edit code this time. You’ll see all your CSS.

Shopify CSS Theme.liquid

Scroll to the bottom of the left menu to the Assets section. Select Add a new asset and name your asset custom.scss.liquid. If you already have it, there’s no need to create new one.

Some people wonder why you can’t create a css.liquid file instead, but a scss.liquid typically has a smaller file size which can make a difference on large websites.

Link your base theme stylesheet to this file so that your custom styles will appear on your website. Go to your theme.scss.liquid file and scroll down to find the following:

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

You can also Ctrl+F and find the snippet.

Add the following below the snippet:

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

Save your stylesheet.

Now you can add code to your custom.css.liquid file and your changes will show up on your website. Click the Preview button on the top right to see how your website would look like and check that everything works before you publish your changes.

Make sure you save a copy of the snippet above and your custom.css.liquid stylesheet. Each time your Shopify theme is updated to the latest version, you’ll have to include the snippet again and create a new CSS file if it has been deleted. This is a temporary requirement until Shopify provides a better solution.

How Do I Create A Custom CSS File?

Go to Online Store > Themes > Actions > Edit code. Scroll down to the Assets section on the left venue and select Create a new asset. You’ll have the option to choose the file type and name it.

How To Edit CSS In Shopify?

Go to Online Store > Themes > Actions > Edit code. The master template included in all pages is the theme.scss.liquid file. It is recommended that you add all custom code in a new custom.scss.liquid file under Assets and link it to your main theme.scss.liquid file. Make a backup of your theme files in case something goes wrong.

Where is CSS found in Shopify?

  1. Log in to your Shopify admin dashboard
  2. Click Online Store
  3. Select the Actions button on your site theme and choose Edit code
  4. You should see your CSS code

Conclusion

It’s easy to add Shopify custom CSS code to add styles and apps that the Shopify platform rich text editor and standard theme settings cannot do. You can even customize your Terms of Service pages.

However, if you’re having issues modifying your theme code or find HTML and CSS too complex, you can ask the support team for help or hire a Shopify Expert.

If you’re looking for (free) tips to increase your Shopify conversion rate and rank higher on Google, you can follow me on Twitter 👉🏻 @bitofseo.

Please DM me if you have any questions about this Shopify article (or have some feedback to make it better 😄️).

About Jake Sacino

After working as an engineer and consultant for a bunch of big companies, Jake now works as a full-time SEO & software engineer.