---
title: Developer preview
description: >-
  Build storefront pages in Liquid with reusable blocks and server-rendered
  partial page updates.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview
  md: >-
    https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview.md
---

# 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 %}`](https://shopify.dev/docs/api/liquid/tags/render) renders a snippet.
* **`{% partial %}`**: Refresh part of a page without a full reload.

***

## What 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](https://shopify.dev/docs/storefronts/themes/architecture/templates/liquid-templates)**: Define the page structure and render HTML on the server.
* **[Blocks](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/block)**: Reusable markup with optional theme editor settings, rendered with `{% block %}`.
* **[Snippets](https://shopify.dev/docs/storefronts/themes/architecture/snippets)**: Internal utilities and repeated Liquid code.
* **[HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)**: Page-specific content written directly in the template.
* **[Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)**: Browser behavior added to the rendered HTML.
* **[Partials](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/partial)**: 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.

***

## How 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

```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](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/block) and [Partial tag](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/partial) pages.

***

## Get started

To try the developer preview, select **Liquid July '26 changes** from the available [feature previews](https://shopify.dev/docs/api/feature-previews). Then start from the [skeleton theme](https://github.com/Shopify/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](https://community.shopify.dev/).

[Block tag\
\
](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/block)

[Render reusable UI from the theme's `blocks/` directory.](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/block)

[Partial tag\
\
](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/partial)

[Mark regions that JavaScript can fetch and replace with server-rendered HTML.](https://shopify.dev/docs/storefronts/themes/getting-started/developer-preview/partial)

***