Snippet CSS/JS Best Practices

New Member
1 0 0

Hey all,

 

I'm optimizing one of my themes right now and was wondering what the best practice is for adding css and javascript to a snippet.  I've seen the css and js put directly in the snippet with style and script tags.  This makes it easier to read and maintain the code, but can slow load time.  I've also seen the css and js put in seperate files and imported to the head tag of theme.liquid.  This seems like it would lead to faster load times, but would be more difficult to maintain.  Which method do you guys use or is there a better method I haven't seen or though of?  Thanks for the help!

0 Likes
Shopify Partner
12 1 4

I use template based CSS and JS to avoid slow loading time. You may follow the following example:

 

{% if template.name contains 'product' %}
//add product page css or js
{% endif %}
1 Like
Tourist
5 0 0

Would you add the code you mentioned to the theme.liquid file? Please forgive me if this is an obvious question. Thanks!

0 Likes
Shopify Partner
12 1 4

Yes, you are right.

1 Like
Highlighted
Tourist
5 0 0

Thanks so much!

0 Likes