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 %}
• {% stylesheet %}

javascript

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

{% javascript %}
document.querySelector('.slideshow').slideshow();
{% endjavascript %}

The content from {% javascript %} tags across all sections is concatenated into a single file, 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:

<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
  <!-- slideshow content -->
</div>

{% javascript %}
  var slideshowSpeed = parseInt(document.querySelector('.slideshow-wrapper').dataset.slideSpeed);
{% endjavascript %}

stylesheet

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

<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
  <!-- slideshow content -->
</div>

{% stylesheet %}
.slideshow-wrapper {
  // your styles
}
{% endstylesheet %}

The content from {% stylesheet %} tags across all sections is concatenated into a single file, 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.