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 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.
Updated about 3 years ago