Pour ajouter une section à un thème Shopify, ouvrez un modèle dans l’éditeur, cliquez sur Ajouter une section, choisissez le composant, configurez-le puis testez-le sur mobile. Si le type de section n’existe pas, créez un fichier Liquid avec un schéma et un preset, déployez-le vers une copie du thème, puis validez ses contenus, images, accessibilité et performances avant publication.
Il existe donc trois chemins : utiliser une section native, ajouter un bloc fourni par une application, ou développer une section sur mesure. Le meilleur choix est celui qui répond au besoin avec la dépendance la plus faible.
Qu’est-ce qu’une section Shopify ?
Une section est un module configurable utilisé dans un modèle ou un groupe comme le header et le footer. Elle peut afficher une bannière, une liste de produits, un texte avec image, des témoignages, une vidéo ou un composant propre à la marque.
Une section contient souvent :
- du Liquid et du HTML pour le rendu ;
- un schéma JSON pour les réglages ;
- des blocs répétables ;
- des styles ;
- parfois un comportement JavaScript ;
- un preset qui la rend disponible dans le sélecteur.
Les bonnes pratiques Shopify pour les sections et blocs recommandent des modules que le marchand peut ajouter, retirer et réordonner. Une section utile donne de l’autonomie sans exposer des dizaines de réglages techniques.
Pour replacer ce composant dans l’ensemble du thème, consultez qu’est-ce qu’un thème Shopify.
Méthode 1 : ajouter une section existante sans code
Dans l’administration :
- allez dans Boutique en ligne > Thèmes ;
- dupliquez le thème si le changement est important ;
- ouvrez Personnaliser sur la copie ;
- sélectionnez le modèle à modifier ;
- cliquez sur Ajouter une section ;
- choisissez le type de section ;
- renseignez son contenu et ses réglages ;
- placez-la dans l’ordre souhaité ;
- enregistrez et prévisualisez.
L’inspecteur d’aperçu Shopify permet également de sélectionner, déplacer, masquer, dupliquer ou supprimer des sections et blocs directement dans la prévisualisation.
Si une section n’apparaît pas, vérifiez le modèle utilisé, les restrictions du thème et la présence d’un preset. Certaines sections sont autorisées seulement sur certains types de page.
Ajouter une section à la bonne page
L’éditeur affiche un exemple de ressource dans un modèle. Ajouter une section au modèle produit par défaut peut modifier toutes les fiches qui l’utilisent. Si le besoin concerne une partie du catalogue, créez d’abord un modèle alternatif.
Exemple : une marque veut une section « Conseils d’utilisation » uniquement sur les produits techniques. La structure correcte est :
- définir les données nécessaires ;
- créer un modèle produit technique ;
- ajouter la section à ce modèle ;
- connecter le contenu à des métachamps ;
- attribuer le modèle aux bons produits.
Cette méthode évite de dupliquer la section et son texte pour chaque fiche. Elle sépare la présentation partagée des données propres au produit.
Méthode 2 : utiliser un bloc d’application
Une application peut fournir un bloc compatible avec les sections et modèles : avis, abonnement, guide des tailles, recommandations ou autre service. Ajoutez le bloc depuis l’éditeur lorsqu’il existe.
Avant de choisir cette voie, vérifiez :
- si l’application est déjà nécessaire pour une fonction métier ;
- quelles données elle traite ;
- son coût récurrent ;
- le script chargé sur la boutique ;
- le comportement sans JavaScript ;
- la procédure de désinstallation ;
- le support disponible ;
- la compatibilité avec le thème.
Une application est justifiée lorsqu’elle gère une fonction et des données durables. Pour afficher un simple bloc de texte avec icône, une section native ou légère sera souvent plus stable.
Méthode 3 : développer une section Liquid
Créez une section lorsque le thème ne fournit pas le composant et que le besoin appartient à l’interface. Travaillez dans une copie ou via Shopify CLI avec un dépôt Git.
Un fichier minimal comporte du rendu et un schéma :
<section class="nd-feature" aria-labelledby="nd-feature-{{ section.id }}">
<div class="nd-feature__inner">
<h2 id="nd-feature-{{ section.id }}">{{ section.settings.heading | escape }}</h2>
<div>{{ section.settings.text }}</div>
</div>
</section>
{% schema %}
{
"name": "Argument principal",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Titre",
"default": "Pourquoi choisir ce produit"
},
{
"type": "richtext",
"id": "text",
"label": "Texte"
}
],
"presets": [
{ "name": "Argument principal" }
]
}
{% endschema %}
Cet exemple illustre la structure, pas un composant prêt à publier. Un projet réel doit ajouter styles, espacements, valeurs vides, traduction et tests. Le preset rend la section sélectionnable dans les modèles compatibles.
Comment concevoir les bons réglages ?
Exposez les décisions utiles au marchand, pas la structure interne du code. Un bon schéma utilise les types adaptés : texte, texte enrichi, image, couleur, plage, sélection, produit, collection, page ou URL.
Pour chaque réglage, demandez :
- l’équipe devra-t-elle vraiment le modifier ?
- le libellé explique-t-il le résultat ?
- une valeur par défaut sûre existe-t-elle ?
- le réglage fonctionne-t-il lorsque le contenu est vide ?
- peut-on limiter les choix pour garder le design cohérent ?
Évitez les champs comme « marge-top-px ». Proposez plutôt une sélection d’espacement cohérente avec le système du thème. L’équipe décide alors du rythme visuel sans gérer des valeurs techniques arbitraires.
Quand utiliser des blocs dans une section ?
Utilisez des blocs lorsque le marchand doit ajouter, retirer ou réordonner plusieurs éléments similaires : avantages, témoignages, étapes, logos ou questions.
Définissez une limite raisonnable. Une section de trois arguments ne doit pas autoriser cinquante blocs si son design n’est pas prévu pour cela. Gérez les cas zéro, un et maximum. Si l’ordre ne change jamais et que le contenu vient de données structurées, des blocs éditables ne sont peut-être pas nécessaires.
Les blocs Shopify peuvent être propres à une section, réutilisables au niveau du thème ou fournis par une application selon l’architecture adoptée.
Ajouter des images sans ralentir la page
Une section d’image doit permettre au marchand de sélectionner le média et fournir un texte alternatif lorsqu’il transmet de l’information. Le code doit demander une taille adaptée à la largeur réelle.
Checklist :
- utiliser les objets image et filtres Shopify ;
- générer plusieurs largeurs ;
- ajouter
widthetheight; - définir
sizes; - ne pas lazy-loader l’image principale visible immédiatement ;
- différer les images plus bas dans la page ;
- prévoir un rendu si l’image manque ;
- ne pas cacher deux fichiers différents avec CSS.
La documentation sur la performance des images dans les thèmes explique pourquoi l’image principale influence souvent le LCP. Notre guide optimiser la vitesse d’un thème Shopify donne la méthode de mesure.
Ajouter du CSS sans créer de conflits
Préfixez les classes de la section et limitez les sélecteurs à son composant. Utilisez les variables du thème pour les couleurs et typographies lorsqu’elles existent. Évitez les styles globaux sur h2, button ou img qui affecteraient d’autres pages.
Testez :
- les contenus courts et longs ;
- le thème clair et sombre ;
- les différentes palettes ;
- les écrans étroits ;
- le zoom du navigateur ;
- les langues utilisées ;
- la section déplacée dans un autre modèle.
Si la correction tient en quelques règles et concerne une instance, le CSS personnalisé peut suffire. Si la section doit être distribuée et maintenue, gardez ses styles avec le code versionné.
Ajouter JavaScript seulement pour une interaction réelle
Une section statique n’a pas besoin de JavaScript. Pour un carrousel, une fenêtre ou un sélecteur, privilégiez les éléments HTML et comportements simples. Chargez le script uniquement lorsque le composant existe.
Dans l’éditeur, les sections peuvent être ajoutées ou rechargées dynamiquement. Le script doit donc pouvoir s’initialiser après un événement de l’éditeur sans dupliquer ses écouteurs. Il doit aussi nettoyer ce qu’il crée si la section disparaît.
Vérifiez le clavier, le focus, les attributs accessibles et l’état sans JavaScript. Une interaction qui ne peut pas être fermée ou utilisée sans souris n’est pas prête.
Rendre la section accessible
L’accessibilité commence dans la structure :
- utiliser le bon élément HTML ;
- garder une hiérarchie de titres logique ;
- donner un nom aux contrôles ;
- rendre les interactions utilisables au clavier ;
- conserver un focus visible ;
- ne pas transmettre l’information seulement par couleur ;
- fournir un texte alternatif aux images utiles ;
- respecter les préférences de réduction d’animation ;
- vérifier le contraste.
N’ajoutez pas un h2 obligatoire dans chaque section si le composant peut être utilisé à différents niveaux. Prévoyez une option ou documentez son emplacement attendu.
Connecter la section à des sources dynamiques
Une section devient plus facile à réutiliser lorsqu’un réglage peut se connecter à un métachamp. Par exemple, le même accordéon affiche les instructions d’entretien propres à chaque produit.
Définissez d’abord une donnée avec un type cohérent, puis autorisez le réglage compatible. Évitez de stocker un tableau complexe dans un texte libre si Shopify propose une liste, une référence ou un métaobjet.
Cette séparation donne à l’équipe la possibilité de mettre à jour la donnée sans dupliquer le modèle. Elle facilite aussi les imports et intégrations avec un ERP ou un PIM.
Tester une nouvelle section
Préparez une matrice courte :
| Cas | Résultat attendu |
|---|---|
| Aucun contenu | Section masquée ou état neutre |
| Titre long | Retour à la ligne sans chevauchement |
| Maximum de blocs | Grille stable |
| Image absente | Aucun espace cassé |
| Mobile | Lecture et action accessibles |
| Clavier | Ordre et focus logiques |
| Éditeur | Ajout, suppression et déplacement fiables |
| Autre modèle | Aucun style dépendant du contexte |
Testez le thème non publié, puis partagez l’aperçu. Vérifiez aussi les pages qui n’utilisent pas la section si vous avez modifié un asset global.
Publier et maintenir
Déployez la section vers une copie, faites relire le code et la recette, puis publiez pendant une période surveillée. Gardez un historique de :
- son objectif ;
- ses fichiers ;
- ses réglages ;
- ses dépendances ;
- ses tests ;
- sa personne responsable.
Lors d’une mise à jour du thème, vérifiez si la nouvelle version propose déjà une section équivalente. Supprimer une personnalisation devenue inutile réduit le coût futur.
Le guide modifier le code Liquid Shopify détaille le versioning, la sécurité et la revue.
Erreurs fréquentes
- Développer une section déjà disponible dans le thème.
- Modifier directement le thème publié.
- Oublier le preset et chercher la section dans l’éditeur.
- Donner des identifiants de réglages instables.
- Ajouter trop d’options techniques.
- Ne pas gérer le contenu vide.
- Charger toutes les images immédiatement.
- Ajouter une bibliothèque JavaScript lourde.
- Utiliser des styles globaux.
- Tester uniquement sur l’accueil.
- Oublier les traductions.
- Ne pas vérifier les blocs d’applications.
Questions fréquentes
Pourquoi ma section n’apparaît-elle pas ?
Vérifiez le preset, la validité du schéma et les restrictions enabled_on ou disabled_on. Confirmez aussi que le modèle accepte des sections.
Peut-on ajouter une section sur toutes les pages ?
Les templates JSON modernes acceptent des sections selon la configuration du thème. Certains emplacements ou types de pages gardent des contraintes particulières.
Faut-il une application pour une section personnalisée ?
Non pour un composant de présentation dans le thème. Une application devient utile pour une fonction distribuée, des données propres, un service serveur ou plusieurs boutiques.
Une section ralentit-elle Shopify ?
Pas par définition. Son effet dépend du Liquid, des images, scripts, styles et services externes. Mesurez avec le contenu réel.
Peut-on réutiliser une section sur plusieurs modèles ?
Oui si son schéma et son code n’assument pas un contexte unique. Gérez l’absence des objets spécifiques et limitez les modèles autorisés si nécessaire.
À retenir
Ajoutez d’abord une section native. Développez seulement si le besoin reste non couvert, puis créez un composant configurable, accessible, rapide et testable. Une bonne section donne plus d’autonomie au marchand sans transformer le thème en assemblage fragile.
Pour faire développer ou auditer un composant, consultez notre Agence Shopify au Maroc, notre service de refonte Shopify ou demandez un audit.