I haven't been able to find anything on how this tag works. Why should I use the {% javascript %} instead of HTML script tag? Is there any difference? I've checked the Shopify cheatsheet which describes every other tag, as well as sifted through several pages of google and haven't found anything substantial.

I haven't been able to find anything on how this tag works. Why should I use the {% javascript %} instead of HTML script tag? Is there any difference? I've checked the Shopify cheatsheet which describes every other tag, as well as sifted through several pages of google and haven't found anything substantial.

• javascript
• shopify
• liquid

• shopify.dev/docs/themes/sections#javascript-and-stylesheet-tags Thats what i found on the javascript tag. – mzndr Commented Oct 23, 2020 at 21:28

2 Answers 2

If you are adding the {% javascript %} tag in a theme section context then:

Sections can bundle their own script and style assets using the javascript and stylesheet tags. You should only need to use this for sections that are meant to be reused or installed on multiple themes or shops.

The scripts for all sections are concatenated into a single file by Shopify and injected into content_for_header. The injected <script> is set to load asynchronously with the defer attribute. The javascript tag is wrapped in a self-executing anonymous function and a try/catch, which means that variables get defined inside a closure and runtime exceptions won't affect other sections.

Reference

It is simply a convenience for you. It offers you no special capabilities. It nice because to the less than stellar technical person, someone who might get a little Liquid but not much else, it is pretty clear that the stuff inside the tag is likely Javascript. They remend you only use these tags if your section is meant for a widely distributed theme, and or many shops. In other words, if you like script tags, go ahead and use them, no harm done.