Section Shopify sur mesure : Liquid, Schéma & Presets (2026)

Points clés à retenir

Les sections Shopify sont des fichiers Liquid dans le dossier sections/ avec un bloc {% schema %} définissant leurs paramètres.

Les paramètres définis dans le schéma apparaissent automatiquement dans le panneau de droite de l’éditeur de thème.

Ajoutez une clé presets au schéma pour rendre la section disponible dans “Ajouter une section” sans avoir à modifier manuellement le modèle.

Fudge génère des sections sur mesure complètes à partir d’une simple description — incluant le HTML, le CSS, le JavaScript et le schéma.

Chaque section dans l’éditeur de thème est un fichier Liquid avec un schéma. Le schéma est ce qui la rend modifiable sans toucher au code — il définit quels paramètres apparaissent dans le panneau de droite, quel est le type de champ pour chaque paramètre, et quelles sont les valeurs par défaut.

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 %}.

<!-- 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 du schéma :

"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
"default" — la valeur initiale lors du premier ajout

Pour un tutoriel plus détaillé, consultez comment ajouter un nouveau type de section dans Shopify.

Les types de fields de schema les plus fréquents

Type	Utilisation
`text`	Champs de texte courts
`textarea`	Texte plus long
`richtext`	Texte formaté (gras/italique)
`image_picker`	Permet aux marchands de choisir une image
`url`	Liens et destinations de boutons
`color`	Sélecteur de couleur (color picker)
`range`	Slider numérique (ex. : padding, taille de la police)
`select`	Menu déroulant avec des options prédéfinies
`checkbox`	Case à cocher (booléen)
`html`	Champ HTML personnalisé
`header`	Titre de groupe (ce n’est pas un vrai paramètre, juste visuel)

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

Les blocs permettent aux marchands d’ajouter du contenu répétitif — témoignages, FAQ, éléments de fonctionnalité. Chaque bloc possède son propre schéma.

{% 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 schéma, 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 requis pour que l’éditeur de thème reconnaisse chaque bloc et permette de le modifier.

Rendre votre section visible dans “Ajouter une section”

La clé "presets" dans le schéma est ce qui fait apparaître votre section 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 JSON de modèle.

Un preset peut également ajouter des blocs de départ. Pour la section de témoignages de l’exemple ci-dessus, ce preset ajoute un témoignage lorsque la section est ajoutée :

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

Le "name" dans les presets est le nom qui apparaît dans le menu “Ajouter une section”.

Créez une section Shopify sur mesure en la décrivant à Fudge.

Démarrer l'essai gratuit

Pour en savoir plus sur les blocs, consultez comment 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’opérateur IA pour les boutiques Shopify, élimine cet obstacle. Décrivez la section dans son éditeur de boutique :

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

Fudge génère le fichier de section complet — HTML, schéma, CSS et JavaScript — sous forme de brouillon à vérifier. Il lit d’abord votre thème pour que la section utilise vos polices, couleurs et espacements, et continue de fonctionner même si vous désinstallez Fudge.

FAQ

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

Une section est un bloc de contenu indépendant avec son propre schéma, ses paramètres et son contenu - elle apparaît dans l'éditeur de thème pour que le marchand puisse l'ajouter et la configurer. Un snippet est du 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 des mises en page configurables par le marchand ; et les snippets pour réutiliser du code dans les sections.

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

Il manque un tableau presets dans le schéma. Une section est techniquement valide sans presets, mais Shopify ne l'affichera pas dans le menu déroulant "Ajouter une section". Ajoutez au moins une entrée : "presets": [{"name": "Ma 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 ne l'autoriser que sur les modèles de produits, ou "disabled_on": { "templates": ["index"] } pour la masquer sur la page d'accueil. Pratique pour les sections spécifiques aux produits qui n'ont pas de sens ailleurs.

Ma section sur mesure va-t-elle casser quand je mettrai à jour le thème ?

Non, mais elle ne sera pas transférée automatiquement. Lorsque vous mettez à jour un thème depuis le Theme Store, Shopify installe une nouvelle copie et conserve les paramètres de l'éditeur de thème, mais pas les modifications de code. Vous devez donc copier les fichiers de vos sections personnalisées dans la nouvelle version. Testez toujours d'abord sur une copie du thème.

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 directement de scripts externes, seulement du JS en ligne. Pour les bibliothèques utilisées par plusieurs sections, il est plus efficace de les charger une seule fois dans theme.liquid plutôt que pour chaque section.