---
title: 'Liquid tags: partial'
description: >-
  Marks a named, server-rendered region that JavaScript can refresh without a
  full page reload.
source_url:
  html: 'https://shopify.dev/docs/api/liquid/tags/partial'
  md: 'https://shopify.dev/docs/api/liquid/tags/partial.md'
api_name: liquid
---

# 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](https://shopify.dev/docs/storefronts/themes/architecture/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:

```liquid
{% 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:

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

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

## Syntax

```oobleckTag
{% partial 'name' %}
  content
{% endpartial %}
```

### name

The name that JavaScript uses to target this partial.

### content

The server-rendered content for the partial.
