Une section personnalisée Shopify permet de créer un composant qui n’existe pas forcément dans le thème installé et de le rendre ensuite configurable depuis l’éditeur de thème. Avec Liquid, HTML, CSS, JavaScript et le système de schema Shopify, vous pouvez créer une bannière, une grille de produits, une présentation de marque, une FAQ, des témoignages, un comparateur ou pratiquement n’importe quel composant adapté aux besoins d’une boutique. Shopify définit les sections comme des modules réutilisables que les marchands peuvent personnaliser et, dans les thèmes modernes, ajouter, supprimer ou réorganiser depuis l’éditeur.

La bonne nouvelle est qu’il n’est pas nécessaire de créer une application Shopify pour cela. Une section personnalisée peut directement être intégrée au thème.

Qu’est-ce qu’une section personnalisée Shopify ?

Une section Shopify est un fichier Liquid situé dans le dossier sections du thème.

Elle contient généralement deux grandes parties :

• le HTML/Liquid qui génère le contenu ;
• le {% schema %} qui définit les paramètres disponibles dans l’éditeur de thème.

Le schema permet par exemple de demander au marchand de choisir une image, de modifier un titre, de sélectionner une couleur, de renseigner un bouton ou d’ajouter plusieurs éléments.

Shopify décrit le dossier sections comme l’emplacement destiné aux modules réutilisables et personnalisables du thème. Les sections peuvent également contenir des blocs permettant d’ajouter, supprimer et réorganiser différents éléments.

Pourquoi créer une section personnalisée Shopify ?

Les thèmes Shopify modernes proposent déjà beaucoup de sections prêtes à l’emploi. Mais elles ne peuvent pas couvrir tous les besoins d’une boutique.

Vous pouvez par exemple vouloir créer :

• une section « Comment ça marche » ;
• une grille de services ;
• une section de témoignages ;
• une bannière promotionnelle ;
• une comparaison de produits ;
• une section avec plusieurs avantages ;
• une FAQ personnalisée ;
• une grille de collections particulière ;
• une section reliée à des métachamps ;
• une présentation de marque ;
• un composant spécifique à une landing page.

L’intérêt d’une section personnalisée est surtout de transformer un besoin spécifique en composant réutilisable et configurable.

Au lieu de demander au propriétaire de la boutique de modifier le code chaque fois qu’il veut changer un titre ou une image, vous pouvez lui donner ces options directement dans le Theme Editor.

Section personnalisée Shopify : comment la créer ?

Pour comprendre le fonctionnement, prenons un exemple simple.

Nous allons créer une section « Nos avantages » contenant un titre et plusieurs cartes.

Chaque carte pourra avoir une icône, un titre et une description.

1. Dupliquer le thème avant de commencer

Avant de modifier le code d’un thème Shopify, il est préférable de travailler sur une copie.

Dans l’administration Shopify, rendez-vous dans :

Boutique en ligne → Thèmes

Puis utilisez le menu du thème concerné pour créer une copie.

Shopify recommande de dupliquer le thème avant de commencer des personnalisations afin de pouvoir revenir facilement à la version précédente en cas de problème.

2. Ouvrir le code du thème

Dans votre thème de développement, ouvrez :

Boutique en ligne → Thèmes → Modifier le code

Vous allez alors retrouver l’architecture du thème.

Parmi les dossiers importants figurent notamment :

assets/
blocks/
config/
layout/
locales/
sections/
snippets/
templates/

Le dossier sections/ est celui qui nous intéresse ici.

3. Créer le fichier de section

Dans le dossier sections, créez un nouveau fichier Liquid.

Par exemple :

custom-benefits.liquid

Vous obtenez alors :

sections/custom-benefits.liquid

C’est ce fichier qui contiendra notre section.

Créer le HTML et le Liquid de la section

Commençons par construire la structure HTML.

<section class="custom-benefits">
  <div class="custom-benefits__container">

    {% if section.settings.heading != blank %}
      <h2 class="custom-benefits__heading">
        {{ section.settings.heading }}
      </h2>
    {% endif %}

    {% if section.settings.introduction != blank %}
      <div class="custom-benefits__introduction">
        {{ section.settings.introduction }}
      </div>
    {% endif %}

    <div class="custom-benefits__grid">

      {% for block in section.blocks %}

        <article
          class="custom-benefits__item"
          {{ block.shopify_attributes }}
        >

          {% if block.settings.icon != blank %}
            <div class="custom-benefits__icon">
              {{ block.settings.icon }}
            </div>
          {% endif %}

          <h3>
            {{ block.settings.title }}
          </h3>

          {% if block.settings.text != blank %}
            <p>
              {{ block.settings.text }}
            </p>
          {% endif %}

        </article>

      {% endfor %}

    </div>

  </div>
</section>

La variable section donne accès aux paramètres de la section.

Par exemple :

{{ section.settings.heading }}

récupère la valeur du paramètre heading.

De son côté :

{{ block.settings.title }}

récupère le titre d’un bloc.

Enfin :

{{ block.shopify_attributes }}

permet à l’éditeur de thème d’identifier correctement le bloc lors de sa sélection ou de ses manipulations. Shopify recommande d’utiliser cet attribut lorsqu’un bloc est rendu dans une boucle.

Ajouter le schema Shopify

Le HTML seul ne suffit pas si vous voulez rendre la section configurable depuis l’administration.

Ajoutez maintenant un {% schema %} à la fin du fichier :

{% schema %}
{
  "name": "Nos avantages",

  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Titre",
      "default": "Pourquoi nous choisir ?"
    },
    {
      "type": "richtext",
      "id": "introduction",
      "label": "Introduction",
      "default": "<p>Découvrez les avantages de notre boutique.</p>"
    }
  ],

  "blocks": [
    {
      "type": "benefit",
      "name": "Avantage",
      "settings": [
        {
          "type": "text",
          "id": "icon",
          "label": "Icône",
          "default": "✓"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Titre",
          "default": "Livraison rapide"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Description",
          "default": "Recevez votre commande rapidement."
        }
      ]
    }
  ],

  "presets": [
    {
      "name": "Nos avantages"
    }
  ]
}
{% endschema %}

Le {% schema %} est essentiel : Shopify l’utilise pour déterminer le nom de la section, ses paramètres, ses blocs et la manière dont elle doit apparaître dans l’éditeur. Une section ne doit contenir qu’un seul bloc {% schema %} et celui-ci doit contenir du JSON valide.

À quoi servent les settings dans une section Shopify ?

Les settings définissent les champs que le marchand pourra modifier.

Prenons cet exemple :

{
  "type": "text",
  "id": "heading",
  "label": "Titre",
  "default": "Pourquoi nous choisir ?"
}

Il contient quatre informations importantes.

type indique le type de champ.

id définit son identifiant utilisable dans Liquid.

label correspond au nom affiché dans l’éditeur.

default fournit une valeur initiale.

Dans notre Liquid, le titre est ensuite récupéré avec :

{{ section.settings.heading }}

Shopify propose différents types de paramètres pour créer des interfaces de personnalisation adaptées : texte, texte enrichi, image, URL, couleur, sélection, plage de valeurs, vidéo, etc.

Ajouter des blocks à une section personnalisée Shopify

Les blocks Shopify sont particulièrement utiles lorsqu’une section doit contenir plusieurs éléments similaires.

Dans notre exemple, nous ne savons pas forcément si le marchand voudra afficher trois, quatre ou cinq avantages.

Nous créons donc un type de bloc benefit.

"blocks": [
  {
    "type": "benefit",
    "name": "Avantage",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Titre"
      }
    ]
  }
]

Puis nous parcourons les blocs dans Liquid :

{% for block in section.blocks %}

  <h3>
    {{ block.settings.title }}
  </h3>

{% endfor %}

Les blocs peuvent être ajoutés, supprimés et réorganisés depuis l’éditeur de thème. Shopify distingue aujourd’hui les section blocks, les theme blocks et les app blocks. Les section blocks sont définis directement dans le schema de la section et restent propres à celle-ci.

Pourquoi utiliser des blocks plutôt que du contenu codé en dur ?

Imaginez une section contenant six témoignages.

Si vous écrivez les six témoignages directement dans le code, le propriétaire de la boutique devra revenir dans le fichier Liquid pour les modifier.

Avec des blocks, il peut simplement cliquer sur Ajouter un bloc, saisir le témoignage et le déplacer à l’endroit souhaité.

La section devient donc beaucoup plus facile à administrer.

Le rôle du preset dans une section Shopify

Le preset est une partie particulièrement importante du schema.

"presets": [
  {
    "name": "Nos avantages"
  }
]

Il indique à Shopify qu’une configuration prédéfinie de cette section peut être proposée dans l’éditeur de thème.

Grâce à lui, le marchand peut généralement aller dans :

Boutique en ligne → Thèmes → Personnaliser → Ajouter une section

et retrouver Nos avantages dans la liste.

Shopify précise que les sections doivent définir des presets pour pouvoir être ajoutées aux templates JSON via le Theme Editor. Sans preset, la section doit être ajoutée manuellement dans le fichier JSON correspondant et ne peut pas être supprimée depuis l’éditeur de la même manière.

Ajouter plusieurs blocs par défaut

Vous pouvez également définir des blocs dès l’ajout de la section.

Par exemple :

"presets": [
  {
    "name": "Nos avantages",
    "blocks": [
      {
        "type": "benefit"
      },
      {
        "type": "benefit"
      },
      {
        "type": "benefit"
      }
    ]
  }
]

Lorsque le marchand ajoute la section, trois blocs seront alors proposés immédiatement.

C’est pratique pour éviter qu’une section soit vide lors de sa première utilisation. Shopify permet également de définir des valeurs par défaut pour les settings et les blocs dans les presets.

Ajouter du CSS à une section personnalisée Shopify

Une fois le Liquid terminé, il faut évidemment travailler l’apparence.

Vous pouvez par exemple commencer avec :

.custom-benefits {
  padding: 70px 20px;
}

.custom-benefits__container {
  max-width: 1200px;
  margin: 0 auto;
}

.custom-benefits__heading {
  text-align: center;
  margin-bottom: 40px;
}

.custom-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.custom-benefits__item {
  padding: 30px;
  text-align: center;
  border-radius: 12px;
}

.custom-benefits__icon {
  font-size: 32px;
  margin-bottom: 15px;
}

@media screen and (max-width: 749px) {
  .custom-benefits__grid {
    grid-template-columns: 1fr;
  }
}

Pour un projet plus important, il est préférable d’organiser correctement les styles dans les assets du thème ou d’utiliser les mécanismes de CSS prévus par l’architecture du thème.

Shopify permet également d’ajouter du CSS personnalisé à l’ensemble du thème ou à une section spécifique depuis l’éditeur, avec certaines limitations.

Comment ajouter une section personnalisée Shopify dans une page ?

Une fois le fichier enregistré et le schema correctement configuré, ouvrez le Theme Editor.

Rendez-vous dans :

Boutique en ligne → Thèmes → Personnaliser

Sélectionnez ensuite la page ou le template souhaité.

Cliquez sur :

Ajouter une section

Votre section devrait apparaître si elle possède un preset compatible.

Vous pouvez ensuite :

• la déplacer ;
• modifier ses paramètres ;
• ajouter des blocs ;
• supprimer des blocs ;
• réorganiser les blocs ;
• masquer ou supprimer la section.

L’éditeur de thème Shopify est précisément conçu pour permettre ce type de personnalisation sans modifier le code à chaque changement de contenu.

Section personnalisée Shopify et templates JSON

Les thèmes Shopify modernes utilisent largement les templates JSON.

Une section peut ainsi être ajoutée à une page sans être directement écrite dans un fichier Liquid de template.

Shopify indique que les templates JSON servent notamment de conteneurs pour les sections et permettent aux marchands de personnaliser plus facilement la composition des pages.

C’est l’une des raisons pour lesquelles les sections personnalisées sont particulièrement puissantes dans l’architecture Online Store 2.0.

Le marchand peut construire une page en empilant différents composants :

Hero
↓
Section personnalisée
↓
Collection
↓
Témoignages
↓
FAQ
↓
Newsletter

sans avoir besoin de modifier directement le template pour chaque réorganisation.

Section personnalisée Shopify ou bloc Custom Liquid ?

Les deux solutions sont différentes.

Le bloc Custom Liquid permet d’insérer rapidement du code Liquid depuis l’éditeur lorsqu’il est disponible dans le thème.

Une véritable section personnalisée est beaucoup plus structurée.

Elle peut posséder :

• son propre schema ;
• plusieurs paramètres ;
• des blocks ;
• des presets ;
• des limites de blocs ;
• des sources dynamiques ;
• ses propres styles ;
• sa propre logique Liquid ;
• une compatibilité avec certaines fonctionnalités d’applications.

Pour un petit morceau de code ponctuel, Custom Liquid peut suffire.

Pour une fonctionnalité réutilisable et administrable, une section personnalisée Shopify est généralement plus adaptée.

Utiliser les métachamps dans une section Shopify

Une section personnalisée peut également exploiter les métachamps Shopify.

Prenons le cas d’un produit auquel vous souhaitez associer une introduction spécifique.

Vous pouvez créer un champ méta personnalisé, puis connecter cette donnée au thème.

Shopify permet de créer des définitions de champs méta personnalisées depuis l’administration et de connecter ensuite leurs valeurs au thème.

En Liquid, une donnée de ce type peut par exemple être récupérée ainsi :

{% if product.metafields.custom.intro != blank %}
  <div class="product-intro">
    {{ product.metafields.custom.intro | metafield_tag }}
  </div>
{% endif %}

Cela permet de créer des sections réellement dynamiques.

La même section peut alors être utilisée sur plusieurs produits tout en affichant des informations différentes.

Peut-on créer une section personnalisée Shopify pour une grille de produits ?

Oui.

C’est même un excellent cas d’utilisation.

Vous pouvez ajouter dans le schema un paramètre permettant au marchand de sélectionner une collection :

{
  "type": "collection",
  "id": "collection",
  "label": "Collection"
}

Puis récupérer cette collection dans Liquid :

{% assign selected_collection = section.settings.collection %}

{% for product in selected_collection.products %}
  <article>
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </article>
{% endfor %}

Vous pouvez ensuite ajouter des paramètres pour choisir le nombre de produits, le nombre de colonnes, l’affichage des prix ou encore le comportement mobile.

C’est ainsi qu’une simple section peut devenir un véritable composant de merchandising.

Peut-on créer une section Shopify avec une image et un bouton ?

Oui.

Il suffit d’ajouter des paramètres adaptés dans le schema :

{
  "type": "image_picker",
  "id": "image",
  "label": "Image"
},
{
  "type": "text",
  "id": "button_label",
  "label": "Texte du bouton"
},
{
  "type": "url",
  "id": "button_link",
  "label": "Lien du bouton"
}

Puis de les utiliser dans Liquid :

{% if section.settings.image != blank %}
  {{ section.settings.image
    | image_url: width: 1600
    | image_tag: loading: 'lazy'
  }}
{% endif %}

{% if section.settings.button_label != blank %}
  <a href="{{ section.settings.button_link }}">
    {{ section.settings.button_label }}
  </a>
{% endif %}

Vous pouvez ainsi transformer une simple section en hero, bannière promotionnelle, présentation de collection ou bloc d’appel à l’action.

Section personnalisée Shopify : peut-elle intégrer une App Block ?

Oui, avec les thèmes et architectures qui prennent en charge les app blocks.

Un app block permet à une application Shopify de fournir du contenu que le marchand peut ajouter depuis le Theme Editor, sans modifier directement le code du thème.

Shopify distingue notamment les blocs de thème et les blocs d’application, ces derniers étant fournis par les applications installées. Ils peuvent servir par exemple à afficher des avis, des formulaires ou d’autres fonctionnalités.

Pour un développeur de thème, cela peut être particulièrement utile lorsqu’une section doit accueillir du contenu provenant de plusieurs applications.

Comment rendre une section personnalisée Shopify responsive ?

Le responsive doit être pensé dès la création de la section.

Une grille de quatre colonnes sur ordinateur peut par exemple devenir deux colonnes sur tablette puis une colonne sur mobile.

Vous pouvez utiliser des media queries :

.custom-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 990px) {
  .custom-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 749px) {
  .custom-benefits__grid {
    grid-template-columns: 1fr;
  }
}

Mais il faut également tester les cas réels : titres longs, images verticales, textes courts, textes longs et différentes tailles d’écran.

Une section qui fonctionne uniquement avec le contenu de démonstration n’est pas encore une section prête pour une boutique réelle.

Les erreurs fréquentes lors de la création d’une section Shopify

Oublier le schema

Sans schema correctement configuré, vous ne pourrez pas exploiter pleinement les paramètres de l’éditeur.

Oublier le preset

Une section sans preset peut ne pas apparaître dans Ajouter une section comme vous le souhaitez. Shopify précise que les presets sont nécessaires pour l’ajout via l’éditeur aux templates JSON.

Faire une erreur dans le JSON

Une simple virgule supplémentaire ou un guillemet mal placé peut rendre le schema invalide.

Vérifiez donc attentivement la syntaxe.

Utiliser des classes CSS trop génériques

Évitez des noms comme :

.title
.container
.box
.text

dans une section complexe.

Préférez des noms spécifiques :

.custom-benefits__title
.custom-benefits__container
.custom-benefits__item

Cela réduit les risques de conflits avec les autres composants du thème.

Ne pas tester sur mobile

Une section peut sembler parfaite sur ordinateur et devenir inutilisable sur un smartphone.

Le responsive doit donc être testé avant publication.

Mettre trop de contenu en dur

Si le marchand doit modifier régulièrement un texte, une image ou un lien, il vaut mieux créer un setting plutôt que d’écrire directement la valeur dans le Liquid.

Section personnalisée Shopify : bonnes pratiques

Une bonne section doit être pensée comme un composant indépendant.

Donnez-lui un nom explicite.

Utilisez des classes CSS spécifiques.

Exposez dans le schema les paramètres réellement utiles.

Utilisez des blocks lorsque le contenu doit être répétitif.

Ajoutez des valeurs par défaut cohérentes.

Limitez éventuellement le nombre de blocs avec max_blocks lorsque votre design l’exige.

Pensez aux métachamps lorsque les données doivent varier selon le produit, la collection ou une autre ressource.

Enfin, évitez de transformer une section simple en énorme fichier contenant toute la logique de la boutique. Les snippets, assets et autres composants du thème permettent de conserver une architecture plus propre.

Shopify recommande justement de réfléchir à la séparation entre sections et blocs afin de construire des composants modulaires et facilement personnalisables.

FAQ sur les sections personnalisées Shopify

Comment créer une section personnalisée Shopify ?

Créez un fichier .liquid dans sections, construisez son HTML/Liquid, ajoutez un {% schema %} avec ses paramètres et ses éventuels blocks, puis ajoutez un preset pour permettre son utilisation depuis le Theme Editor.

Où créer une section Shopify ?

Une section de thème se crée généralement dans le dossier :

sections/

Shopify utilise ce dossier pour stocker les fichiers de sections.

Peut-on créer une section Shopify sans application ?

Oui. Une section personnalisée peut être développée directement dans le thème avec Liquid, HTML, CSS et JavaScript. Une application n’est pas nécessaire pour créer une section de thème.

Comment afficher une section personnalisée dans Shopify ?

La méthode la plus courante consiste à créer un preset dans son schema, puis à ouvrir le Theme Editor et utiliser Ajouter une section.

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

Une section constitue un composant de niveau supérieur dans la page. Les blocs sont des éléments contenus dans une section et peuvent généralement être ajoutés, supprimés ou réorganisés.

Shopify précise que les section blocks sont limités à la section dans laquelle ils sont définis, tandis que les theme blocks peuvent être réutilisés dans plusieurs sections.

Peut-on créer une section Shopify avec du code Liquid ?

Oui. Le Liquid constitue justement l’un des principaux langages utilisés pour développer les sections des thèmes Shopify.

Peut-on rendre une section entièrement modifiable depuis Shopify ?

Oui. Le schema permet d’exposer les paramètres et les blocks dans le Theme Editor afin que le marchand puisse modifier le contenu sans revenir dans le code.

Conclusion

Une section personnalisée Shopify permet d’aller beaucoup plus loin que les composants fournis par défaut par un thème.

La méthode repose principalement sur quatre éléments : un fichier Liquid dans sections, une structure HTML/Liquid, un schema Shopify pour définir les paramètres et, lorsque la section doit être ajoutée depuis l’éditeur, un preset.

Les blocks permettent ensuite de rendre la section flexible, tandis que les métachamps peuvent la connecter à des données dynamiques. Les thèmes Shopify modernes permettent également d’intégrer des app blocks et de construire des pages à partir de composants réorganisables.

Pour un développeur, l’intérêt est donc double : créer un design réellement sur mesure et fournir au propriétaire de la boutique une interface simple pour gérer ce composant.

Si une fonctionnalité n’existe pas dans votre thème Shopify, il n’est pas forcément nécessaire de changer de thème ou d’installer une multitude d’applications. Une section personnalisée bien développée peut souvent répondre précisément au besoin.

Si vous avez besoin de développer une section Shopify sur mesure, de personnaliser votre thème ou de créer une fonctionnalité adaptée à votre boutique, vous pouvez découvrir mes services de développement web.