Here is how to create a custom CSS file

Excursionist
26 0 6

It is often necessary to add CSS to your theme. One problem is that if you add it to the end of Assets -> theme.scss.liquid, if the theme is updated you lose all your changes.

A better way is to create your own CSS file. Here is what you should do.

In Assets create a new file for CSS. I call mine: theme-custom.css ... but call it anything you like.

In that file put the CSS you want for the theme. 

Now you have to make sure that the theme brings in this file AFTER it's own (S)CSS file. 

Edit the Layout -> theme.liquid file.

Scroll down until you see something like: 

 {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
 Right after that line add this:
 
  <!-- THIS IS MY CUSTOM CSS -->
  {{ 'theme-custom.css' | asset_url | stylesheet_tag }}
  <!-- END NEW CODE  -->

The first and third lines are comments. The {{ ...}} line is liquid code saying: Bring in this theme-custom.css file and convert it to a URL and make it a special tag. 

On my site the above line of code will be converted to:

  <link href="//cdn.shopify.com/s/files/1/0095/4613/7659/t/1/assets/theme-custom.css?12957566930314275914" rel="stylesheet" type="text/css" media="all" />
 
 The next thing you should do is keep a copy of your theme-custom.css file. Unfortunately, Shopify does not let you download their files so you will have to copy the content and paste it to a local file using a text editor. 

If your theme is updated all you have to do is re-input the one line of code into the theme.liquid file and create a new CSS file and paste in your CSS. 

It is not a perfect solution, but since Shopify does not provide an update-safe method for making and keeping changes, it is as good as it can be... unless someone knows a better way!

Alan N. Canton, Managing Partner 
NewMedia Ecom
https://NewMediaEcom.com
Fair Oaks, CA

 

2 Likes
New Member
1 0 0

This is a very informative post tho, why are you saying that you can't download the files? you can use themekit (https://shopify.github.io/themekit/) to download the files locally and even work locally with the files and sync live with the server:

$ theme watch

 

0 Likes
Tourist
15 0 0

@Al7  thanks a lot it worked.

0 Likes
New Member
15 0 0

what is this 12957566930314275914

0 Likes
New Member
15 0 0

this is my file url how can i convert into that

 

https://cdn.shopify.com/s/files/1/1705/5713/files/Stylesheet-custom.css.css?1895

 

<link href="https://cdn.shopify.com/s/files/1/1705/5713/files/Stylesheet-custom.css.css?1895/assets/theme-custom..." rel="stylesheet" type="text/css" media="all" />

 

is it fine or please correct for me.

0 Likes
New Member
1 0 0

thanks for your tutorial, but when I checked the theme.liquid file in layout, there is no any code for css, the theme I bought from themefrost.

so i think I can add my custom.css in the theme.scss.liquid file only. 

0 Likes
New Member
1 0 0

Hey. Thanks for this. Im trying to follow the tut using the "Simple" theme at my store, but can't find "  {{ 'theme.scss.css' | asset_url | stylesheet_tag }} " on the theme.scss.liquid at all. Any help? :) Thanks

0 Likes