Créer un thème Shopify avec Liquid : les bases

Liquid est le langage de templates de Shopify : c’est lui qui transforme vos données (produits, collections, panier) en pages HTML. Comprendre ses bases, c’est pouvoir créer ou personnaliser un thème qui colle vraiment à votre marque, sans dépendre d’une app pour le moindre changement. Voici l’essentiel pour démarrer sereinement.

Objets, balises et filtres

Liquid repose sur trois briques. Les objets affichent des données : {{ product.title }}. Les balises portent la logique et le contrôle de flux : {% if %}, {% for %}, {% assign %}. Les filtres transforment une valeur à la volée : {{ product.price | money }} formate un prix, {{ image | image_url: width: 800 }} redimensionne une image. Avec ces trois éléments, on construit n’importe quel affichage.

{% for product in collection.products %}
  {{ product.title }} — {{ product.price | money }}
{% endfor %}

L’architecture d’un thème Shopify

Un thème s’organise en dossiers aux rôles précis :

• layout/ — la structure globale (theme.liquid), commune à toutes les pages.
• templates/ — un gabarit par type de page (produit, collection, page, blog).
• sections/ — des blocs réutilisables et éditables (la pièce maîtresse).
• snippets/ — des morceaux de code réutilisés via {% render %}.
• config/ — les réglages du thème.
• assets/ — CSS, JS et images.
• locales/ — les traductions.

Depuis Online Store 2.0, les templates sont au format JSON et assemblent des sections — c’est ce qui rend la boutique entièrement modulable.

Les sections, pièce maîtresse

Une section est un bloc autonome qui expose ses propres réglages au marchand via une balise {% schema %}. Résultat : le contenu et les options se modifient depuis l’éditeur de thème, sans toucher au code. C’est exactement ce qui libère le marchand de sa dépendance au développeur.

{% for block in section.blocks %}
  <div class="feature">{{ block.settings.title }}</div>
{% endfor %}

{% schema %}
{
  "name": "Réassurance",
  "blocks": [
    { "type": "item", "name": "Argument", "settings": [
      { "type": "text", "id": "title", "label": "Titre" }
    ] }
  ],
  "presets": [ { "name": "Réassurance" } ]
}
{% endschema %}

Les blocks à l’intérieur d’une section permettent au marchand d’ajouter, retirer et réordonner des éléments (arguments, témoignages, colonnes) en toute autonomie.

Afficher les données produit

L’objet product donne accès à tout : titre, description, prix, déclinaisons (variants), images et médias, métachamps. Pour une fiche produit propre, on parcourt les variantes, on gère la disponibilité et on affiche les médias via les filtres d’image de Shopify, qui servent automatiquement la bonne taille. Bien exploiter ces objets, c’est éviter d’aller chercher une app pour ce que le thème sait déjà faire.

Performance : le nerf de la guerre

Liquid est rendu côté serveur et reste rapide par nature. Ce qui plombe une boutique Shopify, c’est presque toujours l’accumulation : trop d’apps qui injectent du script, des images non optimisées, du JavaScript bloquant. Quelques réflexes font la différence : utiliser les filtres image_url avec une largeur adaptée et le lazy-loading, limiter les dépendances externes, et garder un thème léger. Mon credo sur Shopify tient en une phrase : moins d’apps, plus de vitesse, plus de conversion.

Personnaliser un thème ou partir de zéro ?

Deux approches valables. Partir d’un thème solide comme Dawn (le thème de référence de Shopify) et le personnaliser en profondeur couvre l’immense majorité des besoins, plus vite et moins cher. Développer un thème entièrement sur mesure se justifie pour une marque qui veut une expérience vraiment unique et un contrôle total. Le bon choix dépend du budget et du niveau de différenciation visé — pas de la mode.

Bonnes pratiques

• Theme Check : l’outil officiel pour repérer erreurs et mauvaises pratiques.
• Versionner avec Git et travailler sur un thème de préproduction non publié.
• Internationaliser les textes via les fichiers locales plutôt qu’en dur.
• Soigner l’accessibilité et le responsive dès la conception.

La vraie puissance arrive avec Online Store 2.0 et ses sections sur toutes les pages : on détaille tout ça dans Online Store 2.0 : sections, blocs et métaobjets. Et si votre besoin dépasse le thème, voyez comment développer une app Shopify. Vous voulez un thème unique, rapide et facile à éditer ? Découvrez mon offre de création de thème Shopify en Liquid, ou l’ensemble de mes prestations de développeur Shopify freelance.