Shopify Liquid Block and Partial Tags: What the July 2026 Preview Changes

Shopify Liquid block and partial tags come from the Liquid July ’26 developer preview, which adds two tags to Shopify themes. {% block %} lets a template render a reusable theme block directly, and {% partial %} marks a region of server-rendered HTML that JavaScript can refresh without a page reload. This guide explains both with Shopify’s own examples, shows where each fits next to {% render %} and {% content_for %}, and ends with our view on how to evaluate the preview. Checked against Shopify’s developer documentation in October 2026.

What the Block and Partial Tags Add

Shopify describes the preview as a simpler way to build theme pages. Page structure can live directly in a Liquid template, so developers and coding agents can read and edit it in one place. Existing themes keep working with sections, theme settings and JSON templates. The preview adds a Liquid-first composition model alongside them, and it comes with new Theme Check rules (3.28.0) for Liquid-first themes. Those rules catch syntax errors, excessive complexity, oversized files, invalid schema structure, and mismatches between block arguments, schemas and {% doc %} declarations.

To use the tags, select Liquid July ’26 changes from the available feature previews on a development store. Shopify suggests starting from the skeleton theme release candidate or adding the tags to your own theme. See the changelog entry for the announcement.

The Shopify Liquid Block Tag

A block is a reusable piece of a page, with markup, behavior, accessibility attributes and theme editor settings kept in one Liquid file. These are the same theme blocks you already use. What changes is placement: instead of only adding a block through the theme editor, a template can render one with {% block %}. The name maps to a file in blocks/, so {% block 'container' %} renders blocks/container.liquid.

{% block 'container' %}
  <h1>Welcome</h1>
{% endblock %}

Everything between the opening and closing tags is the block’s body content. The block file prints it with {{ block.content }}.

{% assign tag = tag | default: 'div' %}
<{{ tag }} class="{{ class }}">
  {{ block.content }}
</{{ tag }}>

{% schema %}
{
  "name": "t:blocks.container",
  "settings": []
}
{% endschema %}

Parameters and Settings

Pass named parameters after the block name, as you would with {% render %}. The block’s own Liquid decides what each one does. A block’s schema settings are read as block.settings.id and a merchant normally sets them in the theme editor. From a {% block %} call you can also set them directly when the template already knows the value.

{% block 'product-card',
  class: 'featured-product',
  block.settings.product: product
%}
{% endblock %}

Shopify’s guidance is to use a parameter for a value the template controls and a schema setting for a value a merchant controls. It also suggests keeping a block to about six settings or fewer and splitting it if it needs many more. Inline literal arrays work for {% block %} only, not for {% render %} or {% partial %}.

The Shopify Liquid Partial Tag

A partial is a named region of server-rendered HTML that JavaScript can refresh on its own. You mark the region inline in a template or layout, so there is no separate endpoint to maintain. Shopify notes that this replaces the older pattern of pairing the Section Rendering API with a client-side framework, and that it builds on the web platform’s Declarative Partial Updates proposal.

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

Wrap only the part that changes. Sorting or filtering a collection only needs the product grid refreshed, so the grid is the region to name. The name links the server response to the region it replaces.

Fetch and Apply

The @shopify/partial-rendering package provides the JavaScript helpers. fetch() requests fresh HTML for one or more named partials, and apply() replaces the matching regions.

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

const url = new URL(window.location.href);
url.searchParams.set('sort_by', 'price-ascending');

const update = await partials.fetch('product-grid', {
  url: url.toString(),
});

partials.apply(update);

Build the URL from the current page URL or the routes object rather than hardcoding a path, so requests keep working across locales and markets. When one interaction changes several regions, pass several names to a single fetch(). Use refresh() when the request targets the current URL, for example after the back button changes it.

Block, content_for or render

• {% block %}: the template controls the page. You name the block, pass parameters and body content, and the composition stays readable in one file.
• {% content_for %}: the merchant controls the page by adding and arranging blocks in the theme editor, which Shopify stores in a JSON template.
• {% render %}: a snippet in snippets/, for internal, repeated Liquid with no theme editor settings.

Our Analysis: How to Evaluate the Block and Partial Tags

Treat it as a test, not a migration. The tags are in developer preview and available on development stores. Do not rebuild a live theme on them. Try one template and one block on a development store first.

The trade-off is merchant control. A {% block %} call fixes the page structure in code, while {% content_for %} and JSON templates let merchants rearrange blocks. If your clients reorder sections in the editor, a template-driven page takes that freedom away. Choose it where the structure should stay stable.

Partials move the work, not the responsibility. After an update, Shopify’s documentation says apply() carries over focus, text selection, form values and scroll position. The rest is yours. Cancel stale requests with an AbortSignal, set aria-busy while a region loads, announce meaningful changes through a live region, and restore transient state such as an open disclosure.

Watch the compatibility story. Check whether the apps your clients use render inside the regions you plan to refresh. We have not tested third-party apps against partials, so verify before promising the behavior.

Use the Theme Check rules early. Even before adopting the tags, the new rules for complexity, file size and schema mismatches reflect the direction Shopify wants themes to take. For performance work that applies today, see Shopify Liquid Performance: 8 Fixes for a Faster Theme.

FAQ about Shopify Liquid Block and Partial Tags

Are these tags available on live stores? Not yet. They are a developer preview that you enable on a development store through feature previews.

Do I have to rewrite my theme? No. Sections, theme settings and JSON templates keep working, and you only use the new tags if you choose to.

Does a partial replace the Section Rendering API? Shopify presents it as the web-platform way to get the same behavior without a client-side framework. Your existing Section Rendering API code keeps working until you decide to change it.