The require simple tag loads a CSS or JavaScript resource and ensures it appears exactly once on the page. If the same resource is required from multiple components, it loads only once. This makes it safe to require resources from reusable snippets without worrying about duplicate includes.

Syntax

```liquid

{% require css: “stylesheets/product-card” %} ```

```liquid

{% require js: “javascripts/variants” %} ```

```liquid

{% require js: “javascripts/analytics”, multiple: true %} ```

Property	Value
Tag Name	require
Type	Simple tag
Source	Hydrofoil (core)

How deduplication works

By default, require tracks which resources have been loaded and loads each one only once, even if it is required multiple times during rendering.

Example: A product card is rendered 20 times in a collection page, and each card requires the same variants JavaScript. The require tag ensures that file loads only once, at the top of the page:

```liquid

{%- for product in collection.products -%} {%- require js: “javascripts/variants” -%} {%- render “products/card”, product: product -%} {%- endfor -%} ```

The variants script is required 20 times but loads only once on the final page.

Bypass deduplication

Pass multiple: true to load the resource every time it is required, bypassing deduplication:

```liquid

{% require js: “javascripts/analytics”, multiple: true %} ```

Use this only when you need a script to run multiple times (for example, tracking multiple events) or when intentionally loading a library with side effects.

Conditional loading

Wrap require in an if block to load resources conditionally:

```liquid

{% if product.has_variants %} {% require js: “javascripts/variants” %} {% endif %} ```

Or check a page variable:

```liquid

{% if page.template == “product” %} {% require css: “stylesheets/product-page” %} {% endif %} ```

Resource paths

Resources are resolved relative to your theme’s stylesheets and javascripts directories. Pass the path without the file extension:

```liquid

{% require css: “stylesheets/components/card” %} ```

This loads assets/stylesheets/components/card.css.

Output

The require tag outputs HTML <link> and <script> tags, typically placed in the page <head>:

```html

```

Stylesheets are deduplicated by URL; scripts are deduplicated by URL. If you require the same resource with different paths, it may load twice.

When to use require

Use require when:

• A snippet needs a stylesheet or script — the card component requires its own CSS
• Multiple components use the same asset — deduplication prevents duplicates
• You want centralized dependency management — each component declares what it needs

Do not use require for:

• External CDN URLs — use <link> and <script> tags directly in the layout
• Inline CSS or JavaScript — use <style> and <script> tags in the template

Difference from CDN links

require is for theme assets managed by StoreConnect. For external URLs (like a CDN), add them directly to the layout:

```liquid

```

You control deduplication manually, and assets are always loaded from the external URL.

Execution context

The require tag queues assets during template rendering. The actual <link> and <script> tags are inserted into the <head> when the page is rendered. Resources required conditionally are included only if the condition is true at render time.

Examples

Product card with dedicated CSS

A product card snippet requires its own stylesheet:

snippets/products/card.liquid:

```liquid

{% require css: “stylesheets/components/product-card” %}

{{ product.name }}

{{ product.pricing.price | money }} View

```

When the card is rendered multiple times, the stylesheet loads once.

Product variants JavaScript only on product page

Load the variants script conditionally when a product has multiple options:

products/detail.liquid:

```liquid

{% layout “layouts/product” %}

{%- if product.has_variants -%} {% require js: “javascripts/product-variants” %} {%- endif -%}

{{ product.name }}

{%- render “products/variants-selector”, product: product -%} ```

The script loads only if the product has variants, keeping the page lightweight for simple products.

Tracking script that must fire multiple times

A tracking pixel requires multiple: true so it fires each time a product is added to the cart:

```liquid

{% if response.success %} {% require js: “javascripts/tracking/add-to-cart”, multiple: true %}

Product added!

{% endif %} ```

Without multiple: true, the tracking script would load only once and miss subsequent cart additions during the same session.