Section assets

Sections can bundle their own JavaScript and stylesheet assets using the following section-specific Liquid tags:

{% javascript %}
{% stylesheet %}

You need to use these tags only if your section is meant to be installed on multiple themes or shops. Otherwise, you should include the JavaScript or CSS styles that your section needs in your theme's assets directory.

javascript

Anchor link to section titled "javascript"

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.

Instance specific JavaScript

Anchor link to section titled "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

Anchor link to section titled "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

Anchor link to section titled "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.