Partials

Partials are reusable pieces of Liquid code that help you maintain consistency and reduce duplication across your theme. They let you encapsulate markup and logic into separate files that can be rendered from any block, template or other partial.

Partials are not visible to creators in the site builder - they are purely a developer tool for organising and reusing code.

Location

Partial files are located in the partials directory of the theme. They can be organised into subdirectories for clarity:

partials
├── components
│   ├── button-v10.html
│   ├── card-v67.html
│   └── image-v9.html
├── footer
│   └── index.html
├── menu
│   └── index.html
└── styles
    └── block-padding-v6.html

Rendering a partial

Use the Liquid render tag to include a partial. Reference the partial without the .html extension. You do not need to include the parent folder

E.g. For components/button-v1, use:

{% render 'button-v1' %}

Passing variables

Partials cannot directly access variables created outside of them. You must explicitly pass data as named parameters:

{% render 'button-v1',
  block_id: block.id,
  cta_text: button_text,
  cta_link: button_link.url,
  style: 'btn--solid'
%}

Any changes made to a passed variable inside the partial apply only within that partial - they do not affect the outer scope.

Rendering in a loop

You can render a partial for every item in an array using the for parameter. Use the optional as parameter to name the current item inside the partial:

{% for product in products %}
  {% render 'components/card-v6', product: product %}
{% endfor %}

Special partials

Two partials have a special role in the theme and are defined in their own folders:

These are automatically rendered by the platform in the appropriate location on every page.

Versioning

Partials use a versioning system to ensure backward compatibility. Files are named with version numbers (e.g. button-v10.html, card-v67.html). When making changes to a partial, the version number is incremented and all references are updated accordingly.

This ensures that existing sites continue to work correctly while new features can be introduced safely.