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

- [{% javascript %}](#javascript)
- [{% stylesheet %}](#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`](/docs/storefronts/themes/architecture#assets) directory.

> Caution:
> Liquid isn't rendered in `{% javascript %}` or `{% stylesheet %}` tags. Including Liquid code can cause syntax errors, or prevent styles from being applied.

<!-- --->

> Tip:
> If you want to use an existing asset from your theme in a section, then you can include it using the [`asset_url` filter](/docs/api/liquid/filters/asset_url) with either the [`script_tag` filter](/docs/api/liquid/filters/script_tag) or [`stylesheet_tag` filter](/docs/api/liquid/filters/stylesheet_tag). If an asset has already been included in a parent layout or template, then you don't need to include it again.

## javascript

The [`{% javascript %}`](/docs/api/liquid/tags/javascript) tag can be used to include JavaScript for a section:

```liquid

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

```

> Caution:
> Each section can only have one `{% javascript %}` tag. Having more than one will result in an error.

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](/docs/api/liquid/objects/content_for_header). 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:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="/sections/slideshow.liquid"></script>

<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
  <!-- slideshow content -->
</div>

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

END_RAW_MD_CONTENT</script>

</div>
</p>



## stylesheet

The [`{% stylesheet %}`](/docs/api/liquid/tags/stylesheet) tag can be used to include CSS styles for a section:

```liquid

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

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

```

> Caution:
> Each section can only have one `{% stylesheet %}` tag. Having more than one will result in an error.

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](/docs/api/liquid/objects/content_for_header).

### 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.