How to add a CSS file to Debut theme?

Solved
britsy83
Tourist
4 0 2

Hello,

I have recently switched from Minimal to Debut theme. I need to customize it and my preferred approach is to create a new CSS stylesheet (like theme-custom.css). That's what I did with the Minimal theme and it was pretty easy to add this new CSS file to theme.liquid file. However, I am a bit lost as to how I should add the CSS file for the Debut theme. The CSS seems to be called differently and at several places.

That's how theme.liquid looks like in Debut with 3 references to the theme.css file:

<head>
...
<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
...
<script>
    window.performance.mark('debut:theme_stylesheet_loaded.start');

    function onLoadStylesheet() {
      performance.mark('debut:theme_stylesheet_loaded.end');
      performance.measure('debut:theme_stylesheet_loaded', 'debut:theme_stylesheet_loaded.start', 'debut:theme_stylesheet_loaded.end');

      var url = "{{ 'theme.css' | asset_url }}";
      var link = document.querySelector('link[href="' + url + '"]');
      link.loaded = true;
      link.dispatchEvent(new Event('load'));
    }
  </script>

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

 

How should I amend the code to point to my other CSS file theme-custom.css?

Thanks very much in advance!

KetanKumar
Shopify Partner
18896 1984 6992

@britsy83 

sorry for this issue please try this

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
britsy83
Tourist
4 0 2

@KetanKumar 

Thanks for the suggestion but what about the other portions of the call that refer to theme.css. Also the onLoadStylesheet() function only refers to theme.css and the function is already called above, so is it really necessary?

Tks. 

KetanKumar
Shopify Partner
18896 1984 6992

This is an accepted solution.

@britsy83 

no doesn't necessary 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing