Best way to add custom css and js to your code base?

Solved
DevHarrison
Tourist
3 0 1

I have been editing themes for a while now and what I usually do is add any custom css to the bottom of the theme.css file. I have never needed to add js but would I go about doing this in the same way - adding my custom js to the bottom of the theme.js file?

I'm also wondering if it would be better to create a separate file for my custom css (custom.css) and my custom js (custom.js) and then adding that to the theme.liquid head:

<head>

<link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}">

<link rel="preload" as="style" href="{{ 'custom.css' | asset_url }}">

<link rel="preload" as="script" href="{{ 'theme.js' | asset_url }}">

<link rel="preload" as="script" href="{{ 'custom.js' | asset_url }}">

</head>

 

Also another approach for adding custom js would be to add the specific js to the liquid file that it relates to (for example, adding a custom-blog.js script at the bottom of the blog-template.liquid file)

What I would like to know is what approach you would/do you take? Is there another approach I haven't considered? What are the pros and cons of the different  approaches relating to page load speed, optimisation, etc?

 

What I'm thinking (I may be completely wrong - please correct me if I am) is that if there is one large css file and one large js file in the theme.liquid head, doesn't that mean the css and js has to be reloaded each time any page of the site is loaded. And because all the css/js is in one large file, each time you load a new page, you are loading a lot of unnecessary code that has nothing to do with that particular page.

 

Thanks in advance!

0 Likes
JoesIdeas
Shopify Expert
1188 104 285

This is an accepted solution.

You have the right idea, definitely use custom files so that your work doesn't get overwritten if you ever update the theme.

I explain that in this guide: https://speedboostr.com/how-to-safely-edit-your-shopify-theme.

Couple more tips:

- If the JavaScript is needed to render the page elements, include it in the <head>. If it's not required for page rendering (for example if you want to fire it on page load complete), then include it at the end before the closing </body> element.

- Use SCSS for your stylesheets, so they're easier to read when working on them + automatically minified on the server side. Example when creating a new Asset name it product.scss.liquid. Then include in your theme as "product.scss.css".

- For better performance, break your stylesheets into templates and only load them on the template. We call this "conditional loading". For example:

{% if template == "product" %}
  Load the product.scss.css stylesheet here
{% endif %}

 

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
DevHarrison
Tourist
3 0 1

Thank you for such a great answer!


Now that you mentioned SCSS, is it still supported by Shopify - I remember hearing that Shopify stopped supporting SCSS or will be in the near future?

 

One last question regarding the conditional loading. In what file would you include the {% if template == "product" %} code snippet? Would that be in the theme.liquid file or the product.liquid file?

0 Likes
JoesIdeas
Shopify Expert
1188 104 285

@DevHarrison Yes SCSS works great.

For the conditional loading I like to put all the stylesheets in 1 place, in theme.liquid, then load them as needed (using the liquid code {% if template ==...).

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
DevHarrison
Tourist
3 0 1

Great, thank you!