partial

Marks a named, server-rendered region that JavaScript can refresh without a full page reload.

A partial is a named region of server-rendered HTML that JavaScript can refresh without a full page reload. Mark the region inline in a template or layout with {% partial %}.

For the full partial-rendering JavaScript API, including fetching, applying, and refreshing partials, refer to Partials.

Basic syntax

A partial wraps a region of a template or layout in {% partial %} and {% endpartial %}. The content inside is regular Liquid that renders with the rest of the page on the first load:

{% partial 'product-grid' %}
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}
{% endpartial %}

The partial name is how JavaScript targets the region later. For example, refresh product-grid after an interaction changes the current page:

import {partials} from '@shopify/partial-rendering';

await partials.refresh('product-grid', 'product-count');