Section assets

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

• {% javascript %}
• {% stylesheet %}

javascript

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

{% javascript %}
  const type = document.querySelector('.product-detail').dataset.productId;
{% endjavascript %}

The content from {% javascript %} tags injected into the before of the </body> tag.

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

stylesheet

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

<div class="product-detail">
  <!-- product detail content -->
</div>

{% stylesheet %}
  .product-detail {
    margin-top: 100px;
    margin-bottom: 100px;
  }
{% endstylesheet %}

The content from {% stylesheet %} tags will be placed in the position of the element before the section.