Comment créer une section sur mesure sur Shopify (2026)

Points clés

• Les sections Shopify sont des fichiers Liquid dans le dossier sections/ avec un bloc {% schema %} qui définit leurs paramètres.
• Les paramètres définis dans le schema s’affichent automatiquement dans le panneau de droite de l’éditeur de thème.
• Ajoutez une clé presets au schema pour rendre la section disponible dans « Ajouter une section » sans avoir à modifier le template manuellement.
• Fudge génère des sections personnalisées complètes à partir d’une simple description en langage naturel — incluant l’HTML, le CSS, le JavaScript et le schema.

Chaque section dans l’éditeur de thème est un fichier Liquid contenant un schema. C’est le schema qui la rend éditable sans code : il définit quels paramètres s’affichent dans le panneau de droite, le type de champ pour chaque paramètre, et leurs valeurs par défaut.

Comprendre cette structure vous permet de tout construire.

Comment créer une section sur mesure sur Shopify

Étape 1 - Dupliquez votre thème actif. Boutique en ligne (“Online Store”) → Thèmes → menu aux trois points → Dupliquer.

Étape 2 - Ouvrez l’éditeur de code sur le thème dupliqué.

Étape 3 - Allez dans le dossier sections/.

Étape 4 - Cliquez sur le bouton ”+” ou “Ajouter une nouvelle section”. Nommez votre section (ex: custom-promo-banner). Shopify crée sections/custom-promo-banner.liquid.

Étape 5 - Rédigez le contenu de votre section et son schema.

L’anatomie d’une section Shopify

Un fichier de section comporte deux parties principales : le contenu HTML/Liquid et un bloc {% schema %}.

À lire aussi : Ajouter des sections à la page d’accueil sur Shopify.

À lire aussi : Ajouter de la logique Liquid personnalisée sur Shopify.

Pour aller plus loin, consultez notre guide pour ajouter un nouveau type de section Shopify de zéro.

<!-- Le contenu visible -->
<div class="promo-banner" style="background-color: {{ section.settings.background_color }};">
  <div class="page-width">
    <p class="promo-banner__text">{{ section.settings.text }}</p>
    <a href="{{ section.settings.button_link }}" class="button">
      {{ section.settings.button_label }}
    </a>
  </div>
</div>

{% schema %}
{
  "name": "Promo Banner",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Banner text",
      "default": "Free shipping on orders over $50"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ],
  "presets": [
    {
      "name": "Promo Banner"
    }
  ]
}
{% endschema %}

Comment fonctionnent les paramètres (settings) du schema :

• "type" — le type de champ (text, color, url, image_picker, select, range, etc.)
• "id" — le nom de la variable utilisée en Liquid : {{ section.settings.text }}
• "label" — le nom du champ qui s’affiche dans l’Éditeur de thème
• "default" — la valeur par défaut au moment de l’ajout

Les types de fields de schema les plus fréquents

Ajouter des blocks — éléments répétables

Les blocs permettent aux marchands d’ajouter du contenu répétable — témoignages, FAQ, listes de d’avantages. Chaque block a son propre schema.

{% for block in section.blocks %}
  <div class="testimonial {{ block.shopify_attributes }}">
    <p>{{ block.settings.quote }}</p>
    <cite>{{ block.settings.author }}</cite>
  </div>
{% endfor %}

Dans le schema, ajoutez une clé "blocks" :

"blocks": [
  {
    "type": "testimonial",
    "name": "Testimonial",
    "settings": [
      {
        "type": "textarea",
        "id": "quote",
        "label": "Quote"
      },
      {
        "type": "text",
        "id": "author",
        "label": "Author name"
      }
    ]
  }
],
"max_blocks": 6

{{ block.shopify_attributes }} est indispensable pour que l’Éditeur de thème reconnaisse chaque bloque et permette son édition au clic.

Rendre votre section visible dans “Ajouter une section”

C’est la clé "presets" du schema qui permet à votre section d’apparaître dans le menu “Ajouter une section” de l’Éditeur de thème. Sans presets, la section ne fonctionne que si elle est ajoutée manuellement à un fichier template au format JSON.

"presets": [
  {
    "name": "Promo Banner",
    "blocks": [
      {
        "type": "testimonial"
      }
    ]
  }
]

Le "name" dans les presets correspond au libellé qui s’affiche dans le menu “Ajouter une section”.

Pour une approche similaire, lisez ajouter des blocs à une section Shopify.

Ajouter du CSS et JavaScript à une section

Utilisez les balises {% stylesheet %} et {% javascript %} en bas du fichier de votre section (après le schema) :

{% stylesheet %}
  .promo-banner {
    padding: 12px 0;
    text-align: center;
  }

  .promo-banner__text {
    font-size: 14px;
    margin: 0 0 8px;
  }
{% endstylesheet %}

{% javascript %}
  // Le JavaScript spécifique à la section va ici
  // Automatiquement bundlé et chargé en différé (defer) par Shopify
{% endjavascript %}

Shopify fusionne (bundle) automatiquement toutes les feuilles de style et les scripts de vos sections — pas besoin de multiplier les fichiers CSS ou JS pour des sections simples.

Utiliser Fudge pour générer des sections sur mesure

Créer des sections manuellement nécessite de comprendre Liquid, la syntaxe des schémas JSON et l’architecture des sections de Shopify. Fudge lève cette barrière :

“Crée une section de témoignages avec un titre, un sous-titre et jusqu’à 6 blocs de témoignages. Chaque bloc doit avoir une citation (zone de texte), le nom de l’auteur, le titre de l’auteur et une note par étoiles (de 1 à 5). Affiche-les sous forme de grille à 3 colonnes sur desktop, et à 1 colonne sur mobile.”

Fudge génère le fichier de section complet — HTML, schéma, CSS et JavaScript — sous forme de brouillon pour révision. Plus besoin de chercher des schémas, plus d’erreurs de syntaxe Liquid.

FAQ

Sur le même sujet : Créateur de pages Fudge.