Section assets

The {% javascript %} tag can be used to include JavaScript for a section:

The content from {% javascript %} tags across all sections is concatenated into a single file by Shopify, and then injected into the theme through the content_for_header Liquid object. The file is asynchronously loaded through a <script> tag with the defer attribute.

The content from each {% javascript %} tag is wrapped in a self-executing anonymous function so that any variables are defined within a closure, and runtime exceptions won't affect other sections.

Bundled assets are only injected once for each section, not for each instance of a section. If you need instance-specific JavaScript, then add data-attributes to your section markup and reference those attributes in your JavaScript. For example:

The {% stylesheet %} tag can be used to include CSS styles for a section:

The content from {% stylesheet %} tags across all sections is concatenated into a single file by Shopify, and then injected into the theme through the content_for_header global Liquid object.

Bundled assets are only injected once for each section, not for each instance of a section. If you need instance-specific CSS, then use an inline <style> tag.