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:
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!
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 . 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 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 %}
2 Likes
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?
@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 ==…).
1 Like
Hi, i’m attempting this with a .liquid file (because i want to use conditionals inside it) but i’m getting an error:
file was blocked due to MIME type (“application/x-liquid”) mismatch (X-Content-Type-Options: nosniff)
Is it not possible to add a custom.css.liquid file? or is there a better way to do it?
(I need to target one block out of a section using it’s {{ block.id }} ..thanks!)
1 Like
