Shopify Liquid : créer sa propre section, même sans être développeur

Pour créer une section personnalisée sur Shopify, tu crées un fichier dans le dossier sections de ton thème, avec trois parties : le HTML et le Liquid qui affichent le contenu, un peu de style, et un schéma qui fait apparaître les réglages dans l’éditeur. Une fois enregistrée, la section s’ajoute depuis l’éditeur de thème comme n’importe quelle autre, et tu la modifies sans toucher au code.

Sur Nocelium, presque tout le site était fait comme ça. J’avais codé une section hero entière, des puces de bénéfices, des avis clients qui défilent… La plupart en Liquid, et tout avec l’IA : je ne suis pas développeur de formation. Ce tuto reprend la méthode, avec le code complet d’une section que tu peux copier.

Pourquoi créer ses propres sections

Les thèmes gratuits de Shopify sont bien faits, mais on arrive vite à leurs limites dès qu’on veut une page produit qui ressemble vraiment à sa marque. Deux options :

• ajouter du code en dur dans les fichiers du thème : ça marche, mais chaque changement de texte oblige à rouvrir le code ;
• créer une vraie section, avec ses réglages dans l’éditeur : un peu plus de travail au départ, puis tout se modifie en quelques clics.

J’ai fait les deux sur Nocelium. Avec le recul, les vraies sections sont meilleures à tous les niveaux : plus rapides à modifier, plus propres, et tu peux les réutiliser sur plusieurs pages. J’en parle aussi dans mon guide sur le thème Shopify gratuit.

Avant de commencer : duplique ton thème

Dans ton admin, va dans Boutique en ligne, puis Thèmes. Sur ton thème actuel, ouvre le menu « … » et choisis Dupliquer. Tu travailleras sur la copie, et tu ne la publieras que quand tout sera prêt. Si tu casses quelque chose, ta boutique en ligne n’est pas touchée.

L’anatomie d’une section

Une section Shopify, c’est un seul fichier .liquid qui contient :

1. Le contenu : du HTML, avec des balises Liquid ({{ }} pour afficher une valeur, {% %} pour la logique, comme une boucle ou une condition).
2. Le style : le CSS propre à la section.
3. Le schéma : un bloc JSON entre {% schema %} et {% endschema %}. C’est lui qui crée les champs dans l’éditeur (textes, images, couleurs) et qui définit les blocs répétables, par exemple chaque bénéfice d’une liste.

C’est le schéma qui fait toute la différence avec du code en dur. La documentation officielle de Shopify sur les sections détaille toutes les options.

Le code complet : une section « Bénéfices »

Exemple concret, proche de ce que j’avais sur Nocelium : une liste de bénéfices avec une icône, un titre et un texte, réglables un par un dans l’éditeur.

<section class="benefices-{{ section.id }}">
  <div class="benefices__conteneur">
    {% if section.settings.titre != blank %}
      <h2 class="benefices__titre">{{ section.settings.titre }}</h2>
    {% endif %}

    <ul class="benefices__liste">
      {% for block in section.blocks %}
        <li class="benefices__item" {{ block.shopify_attributes }}>
          {% if block.settings.icone != blank %}
            {{ block.settings.icone | image_url: width: 96 | image_tag: loading: 'lazy', class: 'benefices__icone' }}
          {% endif %}
          <h3>{{ block.settings.titre }}</h3>
          <p>{{ block.settings.texte }}</p>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

{% style %}
  .benefices-{{ section.id }} {
    background: {{ section.settings.fond }};
    padding: 48px 20px;
  }
  .benefices-{{ section.id }} .benefices__conteneur {
    max-width: 1100px;
    margin: 0 auto;
  }
  .benefices-{{ section.id }} .benefices__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
  }
  .benefices-{{ section.id }} .benefices__icone {
    width: 48px;
    height: auto;
  }
{% endstyle %}

{% schema %}
{
  "name": "Bénéfices",
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Pourquoi nos clients l'adorent" },
    { "type": "color", "id": "fond", "label": "Couleur de fond", "default": "#f6f3ee" }
  ],
  "blocks": [
    {
      "type": "benefice",
      "name": "Bénéfice",
      "settings": [
        { "type": "image_picker", "id": "icone", "label": "Icône" },
        { "type": "text", "id": "titre", "label": "Titre", "default": "Un bénéfice clair" },
        { "type": "textarea", "id": "texte", "label": "Texte", "default": "Explique ce bénéfice en une phrase." }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [
    {
      "name": "Bénéfices",
      "blocks": [{ "type": "benefice" }, { "type": "benefice" }, { "type": "benefice" }]
    }
  ]
}
{% endschema %}

Ce qu’il faut retenir de ce code :

• section.settings.titre affiche le titre réglé dans l’éditeur ;
• la boucle {% for block in section.blocks %} affiche chaque bénéfice ajouté ;
• {{ block.shopify_attributes }} permet à l’éditeur de repérer chaque bloc quand tu cliques dessus ;
• le style est préfixé par section.id, pour ne pas toucher au reste du thème si tu ajoutes la section deux fois ;
• les presets font apparaître la section dans la liste « Ajouter une section », avec trois bénéfices déjà prêts.

Où coller le code

1. Sur ta copie du thème, ouvre le menu « … » et choisis Modifier le code.
2. Dans le dossier sections (et pas dans snippets ni dans un bloc « Liquid personnalisé » de l’éditeur), crée un nouveau fichier : benefices.liquid.
3. Colle le code, puis enregistre.
4. Ouvre l’éditeur de thème (Personnaliser), va sur la page voulue, clique sur Ajouter une section et choisis Bénéfices.
5. Remplis tes textes, ajoute tes icônes, ajuste la couleur de fond. Plus besoin de toucher au code.

Si l’enregistrement échoue, deux erreurs reviennent presque toujours :

• « Unknown tag ‘schema’ » : le code n’est pas au bon endroit. La balise {% schema %} ne fonctionne que dans un fichier du dossier sections (ou blocks). Si tu l’as collé dans un bloc « Liquid personnalisé » de l’éditeur ou dans le dossier snippets, Shopify ne la reconnaît pas : recrée le fichier dans sections.
• Une erreur de JSON : une virgule en trop ou un guillemet manquant dans le schéma. Shopify affiche la ligne en erreur.

Coder ses sections avec l’IA

C’est comme ça que j’ai construit Nocelium. L’IA fait très bien ce travail, à condition de lui demander les bonnes choses. Un exemple de demande qui marche :

« Crée une section Shopify en Liquid pour un thème Online Store 2.0. Elle affiche des avis clients qui défilent horizontalement. Je veux pouvoir régler dans l’éditeur : un titre, et pour chaque avis (en blocs) le nom, la note sur 5 et le texte. Mets tout le CSS dans la section, préfixé par l’identifiant de la section, et ajoute un preset avec 3 avis. »

Les points qui changent tout :

• demande toujours un schéma avec des réglages : sinon tu récupères du code en dur, impossible à modifier depuis l’éditeur ;
• précise « des blocs » pour tout ce qui se répète (bénéfices, avis, questions de FAQ) ;
• demande un preset, pour que la section apparaisse dans l’éditeur ;
• teste sur la copie du thème, puis vérifie l’affichage sur mobile avant de publier.

Quand quelque chose ne marche pas, copie le message d’erreur de Shopify dans la conversation : l’IA corrige en général en un essai.

Je raconte toute ma méthode, des captures d’écran aux corrections sur mobile, dans IA et Shopify : comment j’ai codé toute ma boutique avec Claude.

Les sections que j’avais codées pour Nocelium

Pour te donner une idée de ce qu’on peut faire avec cette méthode, voici ce que j’avais codé sur Nocelium :

• une section hero entière, en haut de la page d’accueil ;
• des puces de bénéfices, sur le même principe que la section de ce tuto ;
• des avis clients qui défilent ;
• et d’autres sections pour les pages de collection et les pages produit.

Pas besoin de tout refaire : quelques sections bien pensées suffisent à donner une vraie identité à une boutique, et le reste du thème peut rester tel quel.

Si ta boutique n’existe pas encore, commence par mon tuto pour créer une boutique Shopify, puis reviens ajouter tes sections.

Pour mon avis complet sur la plateforme, lis mon avis sur Shopify.