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 comprend deux parties principales : le contenu HTML/Liquid et un bloc {% schema %}.

Article lié : Add Homepage Sections in Shopify.

Article lié : Add Custom Liquid Logic in Shopify.

Pour plus de détails, consultez notre guide sur comment 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": "Bannière promo",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Texte de la bannière",
      "default": "Livraison gratuite pour toute commande de plus de 50 €"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Couleur de fond",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Texte du bouton",
      "default": "Acheter"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Lien du bouton"
    }
  ],
  "presets": [
    {
      "name": "Bannière promo"
    }
  ]
}
{% 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" — ce qui apparaît dans l’éditeur de thème (Theme Editor)
• "default" — la valeur initiale lors du premier 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

Article lié : Fudge Page Builder.