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

Points clés à retenir

• Les sections Shopify sont des fichiers Liquid dans le dossier sections/ contenant un bloc {% schema %} qui définit leurs paramètres.
• Les paramètres (settings) 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 le menu “Ajouter une section” (“Add section”) sans modification manuelle des templates.
• Fudge génère des sections sur mesure complètes à partir d’une simple description — en incluant le HTML, le CSS, le JavaScript et le schema.

Chaque section dans l’Éditeur de thème est un fichier Liquid accompagné d’un schema. C’est ce schema qui permet de la modifier sans coder : il définit quels paramètres apparaissent dans le panneau de droite, leur type de champ, et leurs valeurs par défaut.

Comprendre cette structure vous permet de tout créer.

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 demande de maîtriser la syntaxe Liquid, les schemas JSON et l’architecture back-end de Shopify. Fudge supprime ces frictions :

“Crée une section de témoignages avec un titre, un sous-titre et jusqu’à 6 blocs de témoignages. Chaque bloc a une citation (textarea), le nom de l’auteur, sa fonction, et une note avec des étoiles (range de 1 à 5). Affiche-les dans une grille de 3 colonnes sur desktop, et 1 seule colonne sur mobile.”

Fudge vous génère en brouillon le fichier de section complet — HTML, schema, CSS et JavaScript — prêt à être inspecté. Fini la chasse aux infos manquantes dans les docs et les erreurs de syntaxe Liquid.

À lire aussi : Fudge Page Builder.