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 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

Quelle est la différence entre une section et un snippet sur Shopify ?

Une section est un bloc de contenu indépendant avec son propre schéma, ses propres paramètres et son propre contenu - elle apparaît dans l’éditeur de thème comme un élément que le marchand peut ajouter et configurer. Un snippet est un code Liquid réutilisable rendu via {% render 'snippet-name' %} - il n’a pas de schéma et n’est pas modifiable par le marchand. Utilisez les sections pour les mises en page configurables par le marchand ; et les snippets pour réutiliser du code à l’intérieur des sections.

Pourquoi ma nouvelle section n’apparaît-elle pas dans le menu « Ajouter une section » ?

Le tableau presets est manquant dans le schéma. Une section est techniquement valide sans les presets, mais Shopify ne l’affichera pas dans le menu déroulant « Ajouter une section ». Ajoutez au moins une entrée : "presets": [{"name": "My Section"}] et elle apparaîtra. (Si vous préférez éviter d’écrire le schéma à la main, Fudge génère le fichier de la section — schéma, presets, blocs et Liquid — à partir d’une simple description en langage naturel.)

Puis-je créer une section qui ne fonctionne que sur certains types de pages ?

Oui - dans le schéma, ajoutez "enabled_on": { "templates": ["product"] } pour l’autoriser uniquement sur les templates de produits, ou "disabled_on": { "templates": ["index"] } pour la cacher de la page d’accueil (homepage). C’est très pratique pour les sections spécifiques aux produits qui n’ont pas de sens ailleurs.

Ma section personnalisée va-t-elle casser lors d’une mise à jour du thème ?

Si vous avez gardé votre section personnalisée dans un fichier séparé (sans modifier un fichier existant du thème), elle survivra généralement intacte à une mise à jour. La méthode standard pour mettre à jour les thèmes Shopify conserve les fichiers dans sections/ qui ne font pas partie du thème officiel. Quoi qu’il en soit, testez toujours d’abord sur un thème dupliqué.

Puis-je utiliser des bibliothèques externes dans une section ?

Oui - chargez-les via <script src="..."> dans le HTML de la section ou dans theme.liquid. Le bloc {% javascript %} d’une section ne peut pas importer de scripts externes directement, seulement du JS inline. Pour les bibliothèques utilisées par plusieurs sections, il est plus performant de les charger une seule fois dans theme.liquid que pour chaque section.

Article connexe : Fudge Page Builder.