Developer preview

This preview lets you build storefront pages in Liquid instead of JSON, using two new tags:

{% block %}: Compose a page from reusable pieces right in the template, much like {% render %} renders a snippet.
{% partial %}: Refresh part of a page without a full reload.

Anchor to What changesWhat changes

Today, a page's structure lives in a JSON template that assembles sections, separate from the Liquid that renders it. With {% block %}, that structure moves into the template itself, so you can open a template and read it from top to bottom to see how a page is built. Because the structure stays in code, a coding agent can read the whole template instead of reconstructing the page from a JSON file and a tree of sections.

A page in this model comes together from a few familiar pieces:

Liquid templates: Define the page structure and render HTML on the server.
Blocks: Reusable markup with optional theme editor settings, rendered with {% block %}.
Snippets: Internal utilities and repeated Liquid code.
HTML: Page-specific content written directly in the template.
Web components: Browser behavior added to the rendered HTML.
Partials: Server-rendered regions that JavaScript can refresh, marked with {% partial %}.

Your existing themes keep working. Sections, theme settings, and JSON templates are all still supported. This preview adds a Liquid-first way to compose pages, alongside what you already use.

Anchor to How it fits togetherHow it fits together

A template composes the page from blocks, drops in HTML where you need it, and wraps a {% partial %} around any region that updates on its own. The following collection template renders a heading and a product grid, and marks only the grid as replaceable:

templates/collection.liquid

{% block 'container', class: 'collection' %}

<h1>{{ collection.title }}</h1>

{% partial 'product-grid' %}

{% for product in collection.products %}

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

{% endfor %}

{% endpartial %}

{% endblock %}

Each {% block %} renders the file of the same name from blocks/ and passes it data. The {% partial %} names the product grid, so JavaScript can fetch fresh HTML and replace just that region when a customer sorts or filters. For the full syntax, see the Block tag and Partial tag pages.

Anchor to Get startedGet started

To try the developer preview, select Liquid July '26 changes from the available feature previews. Then start from the skeleton theme, or add {% block %} and {% partial %} to a theme of your own.

Tag behavior and JavaScript helpers can change before general availability, so share what's working and what needs work in the Shopify developer community.

Block tag

Render reusable UI from the theme's blocks/ directory.

Partial tag

Mark regions that JavaScript can fetch and replace with server-rendered HTML.

Was this page helpful?