Comment créer votre première section de thème Shopify

Vous devez pouvoir offrir à vos clients la liberté de modifier leur boutique, et en particulier de personnaliser leur vitrine virtuelle. La fonctionnalité des sections de Shopify est un outil puissant pour adapter les thèmes. Si vous l’utilisez efficacement et que vous suivez les bonnes pratiques, vous pourrez proposer à vos clients de nombreuses options de design.

Que vous créiez un thème Shopify de toutes pièces ou que vous ajustiez un thème existant pour un client, vous devrez créer différents types de sections selon le contexte. Une section bien choisie et bien placée peut avoir un réel impact sur le taux de conversion, car elle contribue à offrir aux consommateurs l’expérience agréable et intuitive qu'ils attendent.

Dans cet article, nous découvrirons comment créer et utiliser différents types de sections pour les thèmes, afin que vous puissiez permettre à vos clients de personnaliser leur boutique à leur image. Nous aborderons également des exemples de sections spécifiques tirés de notre thème Dawn, afin de présenter des cas d’utilisation réels des sections.

Que sont les sections des thèmes ?

Les sections sont des composants modulables d’un thème Shopify que les marchands peuvent personnaliser. Chaque section inclut le contenu et les paramètres d’une zone spécifique d'une boutique Shopify, comme les éléments de base d’une page de produit ou les composants d’une galerie d’image.

Au sein de ces sections, les développeurs ont accès à différents types de paramètres : zones de texte, sélecteurs d’images, menus, code HTML sur mesure, etc. Une fois ces paramètres définis, les marchands peuvent les personnaliser depuis l’éditeur de thème et y insérer leur contenu.

Les sections sont contenues dans le répertoire /sections d’un thème. Elles peuvent être soit incluses de manière statique dans les fichiers de mise en page d'un thème (l’en-tête et le pied de page, par exemple), soit ajoutées dynamiquement à n’importe quel modèle depuis l’éditeur de thème. Pour mieux comprendre quels composants peuvent être représentés comme des sections, consultez le répertoire /sections du thème Dawn.

Avec Online Store 2.0 (Boutique en ligne 2.0), les sections permettent désormais d’organiser tous les aspects de votre thème, des petits éléments spécifiques aux pages entières. Comme nous l’expliquerons dans cet article, vous pouvez maintenant ajouter des sections à n'importe quel template JSON et ainsi agencer facilement différentes pages, qui pourront encore être améliorées par les marchands lorsqu’ils personnaliseront leur thème.

Templates et sections

Avant de vous plonger dans le fonctionnement des sections pour les thèmes Shopify, vous devez comprendre le système de modèles (templates) de thèmes de Shopify. Avec Online Store 2.0, chaque type de page peut être représenté par un fichier .json au sein du répertoire /templates d’un thème. Les développeurs peuvent ainsi structurer chaque type de page en définissant les sections qui apparaîtront par défaut dans les fichiers de templates JSON.

Les templates JSON n’utilisent ni balisage ni objets Liquid qui permettent d’afficher le contenu de la boutique : ce sont de simples fichiers de données qui indiquent quelles sections apparaîtront par défaut sur une page, et dans quel ordre.

Voici un exemple très simple de fichier template product.json :

Ici, la page de produit affichera par défaut une seule section, appelée main-product.liquid. Lorsqu’un marchand personnalisera cette page et y ajoutera de nouvelles sections, le fichier template product.json sera mis à jour avec les informations correspondantes. Nous y reviendrons plus en détail lorsque nous aborderons la façon dont les sections sont incluses dans les templates.

Les fondamentaux des sections

Lorsque vous développez votre thème en utilisant des sections et des templates JSON, vous pouvez créer vos fichiers de sections selon deux catégories distinctes : les sections de pages principales (« main » en anglais) et les composants modulaires individuels.

Sections de pages principales

Dans une section de page principale, vous devez inclure tout le contenu par défaut pour cette page. Par exemple, dans la section principale d’une page de produit, vous devez inclure les éléments importants pour l’affichage d'un produit et de ses propriétés associées, comme le titre du produit, la description, un support multimédia, le prix et le formulaire d’ajout au panier.

Vous pouvez accéder aux variables (ou objets) Liquid d’une section en fonction du template de page dans lequel la section est incluse. Ainsi, une section qui sera affichée dans un template product.json pourra accéder à tous les attributs de l’objet Liquid product, qui représente le produit dont la page est affichée.

De la même manière, une section incluse dans un fichier collection.json pourra accéder à tous les attributs de l’objet Liquid collection. Toutes les sections, quel que soit l’endroit où elles apparaissent, peuvent aussi accéder à l’ensemble des objets globaux Liquid.

En plus du balisage et des objets Liquid spécifiques que vous ajoutez à une section principale, vous pouvez également créer des paramètres entre les balises {% schema %}. Ces paramètres peuvent faire référence à des éléments de la section, et être configurés par les marchands dans l’éditeur de thème.

Puisqu’une section principale contient un balisage spécifique à un type de page, vous devez toujours l’inclure dans le template associé. Pour empêcher qu’une section principale soit ajoutée à d’autres types de pages depuis l’éditeur de thème, vous devez vous assurer qu’elle ne contienne pas de presets (paramètres prédéfinis) dans son schéma de section.

Si vous souhaitez voir un exemple de section de page principale, consultez le fichier main-product.liquid du répertoire /sections de Dawn, ou tout autre fichier de section dont le titre commence par main. Nous vous conseillons également de toujours inclure main dans le titre de vos sections principales pour vous aider à distinguer les différents types de sections.

Sections modulaires

Les sections modulaires sont des sections qui peuvent être réutilisées à différents emplacements d'une boutique en ligne et viennent compléter les éléments principaux d'une page. Il peut s’agir par exemple de collections en vedette, de diaporamas ou de formulaires d'inscription à une newsletter.

Ces sections sont en général ajoutées aux pages par les marchands depuis l’éditeur de thème, plutôt qu’incluses par défaut dans un modèle de page. Pour qu’une section puisse être ajoutée à une page via l’éditeur, son schéma doit inclure des presets. Une fois les presets ajoutés, les marchands peuvent accéder à cette section en cliquant sur Ajouter une section dans l’éditeur de thème.

À l’inverse des sections principales, les sections modulaires contiennent généralement un contenu et un balisage pouvant être réutilisés dans différents types de pages et dans différents contextes sur une boutique Shopify. Vous devez donc éviter d’utiliser des objets Liquid associés à un type de page spécifique dans ces sections.

Il est toutefois possible de restreindre l’utilisation d’une section à certains types de pages uniquement, en utilisant l’attribut templates dans le schéma de cette section. Par exemple, voici la ligne à inclure dans les balises schema d’une section si vous souhaitez qu’elle soit disponible uniquement pour les pages de type « product » et « collection » :

"templates": ["product", "collection"]

L’attribut templates accepte une liste de chaînes représentant le type de page. Vous aurez probablement à créer toute une gamme de sections variées offrant des fonctionnalités diverses, en fonction des demandes spécifiques de votre client ou des fonctionnalités que vous souhaitez inclure dans votre thème. Pour voir des exemples de sections modulaires, explorez les sections newsletter ou rich-text de Dawn.

Paramètres des sections

Nous avons rapidement vu comment les paramètres d'un fichier de section peuvent être utilisés pour créer des options de personnalisation à destination des marchands. Voyons maintenant plus en détail comment définir ces paramètres.

Les paramètres sont inclus dans les fichiers de sections entre des balises {% schema %}, ce qui indique qu’il s’agit de paramètres devant s’afficher dans l’interface de l’éditeur de thème. Prenons un exemple très simple de section de texte personnalisée :

Cet exemple comprend deux éléments HTML : un titre et un paragraphe. Chacun de ces éléments contient un contenu dynamique que nous avons créé avec l’objet Liquid section.settings. Cet objet nous permet de récupérer les valeurs de chaque paramètre en utilisant son identifiant unique.

Sous les balisages HTML et Liquid se trouvent les paramètres de notre section, entourés de balises {% schema %}. Chaque paramètre est représenté par un objet, où est défini l’id (identifiant) du paramètre, son type et la façon dont il s’affichera dans l’éditeur. Pour accéder à un paramètre de section dans Liquid, vous devez joindre son id à l’objet Liquid section.settings. Nous définissons également le type de paramètre dont il s’agit et la façon dont il s’affichera dans l’éditeur de thème.

Concernant les paramètres inclus dans nos balises schema :

• id fait référence à la variable Liquid qui est définie.
• type définit le type de sortie que nous créons.
• label fournit le contexte affiché dans l’éditeur de thème.
• default assigne une valeur par défaut.

Dans l’exemple ci-dessus, nous avons créé une zone de type text (texte) pour notre titre et une zone richtext (texte enrichi) pour le corps de texte, mais il est possible d’ajouter de nombreux types de sorties différents, en fonction des besoins de vos clients. Citons par exemple image_picker pour la sélection d’une image, radio pour une case d’option, font_picker pour l’ajout d'une vidéo ou font_picker pour la sélection d'une police.

Cet exemple crée une section valide, mais il lui manque cependant un aspect essentiel : nous devons déterminer où cette section apparaîtra dans le thème. Nous reviendrons ultérieurement sur les différentes approches permettant d’inclure des sections. Pour l'instant, nous allons créer des presets pour permettre à la section d’être ajoutée à n’importe quelle page via l’éditeur de thème.

Les presets sont des configurations par défaut des sections. Ils sont ajoutés entre les balises {% schema %} d’une section. Dans notre cas, les presets pourraient être définis ainsi :

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

Ajoutons-les à notre exemple :

Si nous accédons maintenant à l'éditeur de thème et que nous cliquons sur Ajouter une section pour n’importe quelle page, la section que nous venons de définir sera proposée parmi les options disponibles. Ses paramètres seront affichés dans la barre latérale à droite, avec les intitulés et le texte par défaut que nous avons ajoutés. Nous pouvons entrer le texte que nous souhaitons, et il sera affiché dans notre section.

Cet exemple simple permet de comprendre la relation entre les paramètres de section et les variables que vous pouvez créer au sein des sections, ainsi que leur affichage dans l’éditeur de thème. Si vous souhaitez découvrir un exemple plus complexe, consultez la section rich text du thème Dawn.

Comment inclure des sections dans des pages

Comme nous l’avons déjà dit, il existe plusieurs méthodes pour inclure les sections dans les pages d’un thème. Examinons chacune de ces approches individuellement.

1. Inclure des sections dans des templates JSON

Lorsque nous avons abordé les sections principales, nous avons vu que les fichiers templates JSON acceptent une propriété "main", qui devient la section par défaut pour ce type de page et qui doit inclure tous les éléments de contenu importants.

En plus de cette section "main", il est également possible d'inclure d’autres sections dans un template JSON, qui apparaîtront par défaut sur ce type de page. Prenons l’exemple d’un template JSON « product ». Nous pouvons inclure une section de recommandations de produits sur la page en ajoutant un nouvel objet sous la section "main" :

Nous avons ici donné un nom à la section, recommendations (recommandations), et la propriété recommendations est utilisée pour identifier le fichier du répertoire /sections que nous souhaitons inclure.

Puisque le template JSON fait référence à plusieurs sections, nous devons définir l’ordre d’affichage des sections, à l’aide de l’objet order. Toutes les sections d'un template JSON devront avoir un ordre par défaut, mais les marchands pourront les réorganiser comme ils le souhaitent depuis l’éditeur de thème.

Les sections ajoutées sans preset à un template JSON ne pourront pas être supprimées dans l’éditeur de thème, mais elles pourront être masquées si un marchand n’en a pas besoin. 

2. Inclure des sections comme options sur toutes les pages

Comme nous l’avons vu avec notre texte personnalisé, une section peut être mise à disposition sur toutes les pages d’un thème en utilisant des presets dans les paramètres schema.

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

Avec cette approche, les sections peuvent être ajoutées, repositionnées et supprimées depuis l’éditeur de thème. Elles peuvent aussi être restreintes à certaines pages uniquement grâce à la propriété templates.

Cette fonctionnalité de glisser-déposer permet d’offrir une large gamme d'options de personnalisation des boutiques lorsque vous créez des sections dynamiques sur mesure. Vous pouvez par exemple créer des sections déplaçables pour des vidéos, des produits ou des galeries d’images. La section newsletter de Dawn illustre parfaitement cette méthode.

3. Utiliser les balises {% section %} pour ajouter des sections statiques

La balise section de Liquid vous permet d'afficher une section depuis le répertoire /sections dans une mise en page Liquid ou un fichier template. Elle peut se présenter ainsi :

{% section 'header' %}

Les sections ajoutées à l’aide de cette balise section ne peuvent pas être supprimées, repositionnées ou masquées dans l’éditeur de thème. Leur position sur la page est verrouillée, selon l'emplacement défini dans le fichier de mise en page ou le template.

Cette approche est généralement utilisée pour les contenus et composants qui doivent toujours être visibles, comme les en-têtes, pieds de page et barres d’annonces. 

Libérez votre créativité et celle des marchands

Maintenant que vous savez comment créer et ajouter des sections pour vos thèmes, vous pouvez imaginer une infinité d’options pour les boutiques de vos clients.

Les templates JSON vous permettent de proposer des sections pour toutes les pages d'un thème. Vous pouvez ainsi mettre vos marchands sur les rails pour qu’ils créent leur boutique exactement comme ils le souhaitent.

---

Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Liam Griffin. Traduction par Solenn Marchand.