{% partial %} en Liquid : ce qui change par rapport à la Section Rendering API

Si tu utilises la Section Rendering API pour rafraîchir un panier ou une pagination sans recharger la page, Shopify vient de publier une alternative en developer preview : le tag Liquid {% partial %}. Voici ce qu’il fait, et ce qui change vraiment par rapport à ce que tu utilises probablement déjà.

Ce que fait {% partial %}

Un partial est une zone de HTML rendue côté serveur, que tu déclares directement dans un template ou un layout Liquid entre {% partial 'nom' %} et {% endpartial %}.

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

Le nom du partial devient l’identifiant que le JavaScript utilise pour cibler et rafraîchir cette zone précise, sans toucher au reste de la page. La bonne pratique annoncée par Shopify : n’entourer que ce qui change vraiment, pas la page entière.

Différences avec la Section Rendering API

Avec la Section Rendering API, tu appelles ?sections=id-1,id-2 sur n’importe quelle URL (5 sections maximum par requête), tu reçois du JSON avec le HTML rendu de chaque section, et c’est à toi d’écrire le JavaScript qui remplace le bon élément dans le DOM, gère le focus, le scroll et l’état des formulaires.

Avec {% partial %}, la zone à rafraîchir est déclarée directement dans le Liquid, pas besoin de connaître un ID de section à l’avance. Le package officiel @shopify/partial-rendering fournit fetch(), apply(), refresh(), get() et getAll() pour aller chercher le HTML à jour et le poser dans la page à ta place, en préservant automatiquement le focus, la sélection, les valeurs de formulaire et la position de scroll. C’est exactement le genre de détail que tu devais gérer toi-même avec la Section Rendering API.

Autre différence : la Section Rendering API renvoie null pour une section qui échoue ou n’existe pas, même avec un statut HTTP 200, donc il faut vérifier la réponse soi-même. Ce comportement n’est pas encore documenté pour les partials, la feature étant toujours en développement actif.

Le vrai changement : composer la page dans un seul template

Jusqu’ici, une zone dynamique impliquait souvent de découper la logique entre une section, un script JS séparé, et un endpoint AJAX à orchestrer soi-même. Avec {% partial %}, et le nouveau tag {% block %} pour les theme blocks réutilisables, toute la structure de la page peut vivre dans un seul template Liquid. Shopify le formule directement dans son changelog : ça rend le contenu plus facile à lire et à modifier, y compris pour un agent IA qui édite du thème.

Statut : developer preview, pas encore pour la prod

Pour tester, il faut activer l’option Liquid July ’26 dans les feature previews d’un thème sur une boutique de développement. La compatibilité avec l’existant est annoncée (sections, réglages de thème, templates JSON), et Theme Check (à partir de la v3.28.0) valide déjà la syntaxe des partials. Ça reste un developer preview : pas de garantie de stabilité, l’API peut encore changer avant la disponibilité générale.

Faut-il migrer sa Section Rendering API dès maintenant ?

Non, pas dans un thème en production. Tant que c’est en developer preview, rien ne garantit que la syntaxe ou le comportement restent identiques d’ici la sortie officielle. Par contre, si tu démarres un nouveau thème ou que tu ajoutes une zone dynamique (filtre de collection, pagination), c’est le bon moment pour tester {% partial %} sur une boutique de développement en parallèle de ton implémentation actuelle. Le gain n’est pas seulement d’écrire moins de JavaScript : c’est surtout que la logique de la zone reste au même endroit, dans le template, plutôt qu’éclatée entre une section, un script custom et un appel AJAX.