Here is how to create a custom CSS file

Highlighted
Excursionist
26 0 18

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

 

Highlighted
New Member
3 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
Highlighted
Excursionist
20 0 3

@Al7  thanks a lot it worked.

0 Likes
Highlighted
New Member
15 0 0

what is this 12957566930314275914

0 Likes
Highlighted
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
Highlighted
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
Highlighted
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
Highlighted
Shopify Partner
18 0 4

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

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Excursionist
20 0 3

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 -%}