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

You may have a store design in mind that none of the Shopify themes or apps can reproduce.

Custom CSS lets you adjust your shop’s appearance to match that design.

Follow these steps to add custom CSS to your Shopify store or edit it.

1. Backup Your Site

A backup is not technically required before you start.

Even experienced CSS developers make mistakes.

If there is any chance you might make a CSS error, I strongly recommend backing up the site before changing it.

A backup lets you restore the shop to its current state if something goes wrong.

Follow this guide on how to backup your Shopify store.

Continue to step 2 once your backup is ready, or if you choose to proceed without one.

2. Navigate To Your Theme Files

Open your theme files by signing in to Shopify admin at your-store-name.myshopify.com/admin.

Replace your-store-name with the name of your store.

In the left sidebar, open Themes under Online Store, beneath the “Sales Channels” heading.

Look for the “Actions” dropdown to the right of “Current theme”.

Open the dropdown and select “Edit code”, as shown below:

3. Edit or Create a Custom CSS File

The editor displays the files that make up your Shopify store.

You can either edit an existing .css file or create a separate file.

Find existing files by entering .css in the search bar.

The results should list your theme’s CSS files, as shown below:

Open theme.css to edit the existing CSS.

Use this file to change existing styles or add your own CSS.

Editing this file is quick and straightforward, but tracking your changes can be difficult.

A separate CSS file takes more work initially but makes customisations easier to track and update later. To create one, choose “Add a new asset” under “Assets”.

Choose between “Upload a file” and “Create a blank file”.

Upload a CSS file if you have already created one in another application.

Otherwise, select “Create a blank file”, name it “custom” and set its extension to .css.

Put all your custom CSS in this file.

Use the search bar again to find theme.liquid.

Open that file and find a line similar to this:

<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">

Use Ctrl + F to search for rel=”stylesheet”.

Paste the following line immediately beneath it:

<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}" type="text/css">

Check that the filename matches the CSS file you just uploaded or created.

If you used another filename, replace ‘custom.css’ in the snippet above with that name.

Click “Save” in the editor’s top-right corner to save your stylesheet.

Your stylesheet is now saved.

Code added to custom.css will now appear as changes on your website.

Use Preview in the top-right corner to inspect the site and check that everything works before publishing your changes.

Keep copies of the snippet above and your custom.css stylesheet.

After each update to the latest Shopify theme version, add the snippet again. Recreate the CSS file too if the update deleted it.

This requirement is temporary, pending a better solution from Shopify.

Conclusion

Custom CSS lets you add styles and apps beyond those available through Shopify’s rich text editor and standard theme settings. You can also customise Terms of Service pages.

If editing the theme is difficult or HTML and CSS are too complex, contact support or hire a Shopify Expert.