Here is how to create a custom CSS file

[Al7]

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

[Al-dev]

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

[kalyan_chakri]

@Al7  thanks a lot it worked.

[Khurram_Shahzad]

what is this 12957566930314275914

[Khurram_Shahzad]

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.

[Taogor]

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. 

[kodename]

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

[jmt]

@kodename that liquid tag will be in theme.liquid, NOT in theme.scss.liquid

[idngessnio]

Please, How to link new custom css file to any new page I create ?

[kalyan_chakri]

Upload your CSS file to assets folder and add this piece of code in theme.liquid within head tag. You will find other files included in this way, follow the same. 

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

If in a specific page you can add certain conditions something like this. Added different conditions for an example. Pick whatever you need.

    {%- if page.handle == 'sample-page' -%}
    	<script src="{{ 'samplepage.js' | asset_url }}" defer></script>
    {%- elsif page.handle == 'sample-page2' -%}
    	<script src="{{ 'example2.js' | asset_url }}" defer></script>
    {%- elsif template == 'cart' -%}
    	{% include "cartjavascript.js" %}
    {%- endif -%}