Section assets

Sections can bundle their own JavaScript and stylesheet assets using the following section-specific Liquid tags. You need to use these section-specific Liquid tags only if your section is meant to be installed on multiple themes or shops.

javascript

The {% javascript %} tag can be used to include JavasScript 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 global 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.

Instance specific JavaScript

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:

stylesheet

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.

Instance specific styles

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.

On this page