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

Il est essentiel de donner à vos clients un contrôle créatif, en particulier lorsqu'ils souhaitent pouvoir personnaliser leur vitrine. La fonctionnalité de sections de Shopify est un outil puissant pour personnaliser les thèmes Shopify, donc les utiliser efficacement et suivre les meilleures pratiques débloquera une gamme d'options pour vos clients.

Si vous créez un thème Shopify à partir de rien ou si vous peaufinez un thème pour un client, vous devrez créer différents types de sections, qui varieront en fonction du contexte. De plus, les clients s'attendent à une expérience conviviale et intuitive, ce qui signifie que la bonne section, au bon endroit, peut avoir un impact énorme sur la conversion.

Dans cet article, nous expliquerons comment commencer à créer différents types de sections thématiques et les règles d'utilisation, afin que vous puissiez aider vos clients à personnaliser leur boutique. Nous explorerons également quelques exemples de sections spécifiques de notre thème Dawn disponible en source, pour montrer exactement comment vous pouvez les utiliser dans des scénarios du monde réel.

Que sont les sections thématiques ?

À un niveau élevé, les sections sont des composants modulaires d'un thème Shopify que les marchands peuvent personnaliser. Les sections contiennent du contenu et des paramètres pour des zones spécifiques d'une boutique Shopify, telles que les éléments de base d'une page de produit ou un composant de diaporama.

Dans ces sections, les développeurs ont accès à une gamme de types de paramètres différents, des entrées de texte et des sélecteurs d'images, au code HTML et aux menus personnalisés, que les marchands peuvent personnaliser à partir de l'éditeur de thème et remplir avec leur contenu.

Les sections sont contenues dans le répertoire /sections d'un thème et peuvent être incluses de manière statique dans les fichiers de mise en page d'un thème (comme l'en-tête et le pied de page), ou elles peuvent être ajoutées dynamiquement à n'importe quel modèle à partir de l'éditeur de thème. Pour avoir une idée des différents composants qui peuvent être représentés sous forme de sections, vous pouvez explorer le répertoire /sections du thème Dawn.

Avec le lancement de la boutique en ligne 2.0, les sections peuvent désormais être utilisées comme principal moyen d'organiser tous les différents aspects de votre thème, des pages entières aux éléments individuels. Comme nous le verrons dans cet article, la possibilité d'ajouter des sections à n'importe quel modèle JSON vous permettra d'organiser facilement différentes pages, ce qui peut être encore amélioré lorsque les marchands personnalisent leur thème.

Modèles et rubriques

L'une des conditions préalables pour apprendre le fonctionnement des sections sur les thèmes Shopify est de comprendre le système de modèles de thèmes de Shopify. Avec Online Store 2.0, chaque type de page peut être représenté sous la forme d'un fichier .json dans le répertoire /templates d'un thème. Les développeurs peuvent structurer chaque type de page en définissant les sections qui apparaîtront par défaut dans ces fichiers de modèle JSON.

Ces modèles JSON n'incluent aucun balisage ou objet Liquid pour afficher le contenu du magasin, ce sont simplement des fichiers de données qui indiquent quelles sections apparaîtront par défaut sur une page et dans quel ordre.

Un exemple de base de ce à quoi pourrait ressembler un fichier de modèle product.json serait :

Dans ce cas, une page de produit serait rendue avec une section appelée main-product.liquid , et ce serait la seule section apparaissant par défaut. Lorsqu'un marchand personnalise cette page et ajoute d'autres sections à la page, le fichier de modèle product.json est mis à jour avec ces informations. Nous explorerons davantage ce processus dans cet article lorsque nous examinerons comment les sections sont incluses dans les modèles.

Principes de base des sections

Lorsque vous développez votre thème à l'aide de sections et de modèles JSON, vous pouvez envisager de créer des fichiers de section dans deux catégories distinctes : les sections de page "principales" et les composants modulaires individuels.

Sections de la page principale

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

Vous pouvez accéder aux variables Liquid, ou objets, dans une section, en fonction du modèle de page dans lequel une section est incluse. Cela signifie qu'une section qui sera rendue dans un modèle product.json pourra accéder à tous les attributs du product Liquid. objet, représentant le produit dont la page est rendue.

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

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

Étant donné qu'une section de page principale inclut un balisage spécifique à un type de page, vous ne voudrez l'inclure que dans son modèle associé. Pour empêcher qu'une section de page principale soit ajoutée à d'autres types de page à partir de l'éditeur de thème, elle ne doit pas contenir de préréglages dans son schéma de section.

Pour afficher un exemple de section de page principale, vous pouvez explorer le fichier main-product.liquid dans le répertoire /sections de Dawn, ou l'une des sections dont le titre est préfixé par main . En règle générale, vous devez également nommer les sections de votre page principale avec main dans le titre pour vous aider à distinguer les différents types de section.

Sections modulaires

Les sections modulaires sont des sections qui peuvent être réutilisées dans différentes zones d'une boutique en ligne et qui complètent les principaux éléments d'une page. Des exemples de ces types de sections incluent des collections en vedette, des diaporamas et des formulaires d'inscription à la newsletter.

Ces sections seraient généralement ajoutées aux pages par les marchands utilisant l'éditeur de thème, plutôt que les sections ajoutées par défaut à un modèle de page. Pour qu'une section soit ajoutée à une page via l'éditeur, la section doit contenir des préréglages dans son schéma. Une fois ces préréglages ajoutés, la section sera une option disponible lorsque le commerçant cliquera sur Ajouter une section dans l'éditeur de thème.

Contrairement aux sections de page "principales", les sections modulaires contiennent généralement du contenu et du balisage qui peuvent être réutilisés sur différents types de page et dans différents contextes sur une boutique Shopify. Les développeurs doivent donc éviter de s'appuyer sur des objets Liquid spécifiques à la page dans ces sections.

Il est toutefois possible de limiter une section pour qu'elle soit uniquement disponible sur des types de page spécifiques en utilisant l'attribut templates dans le schéma de section. Par exemple, si vous souhaitez limiter une section aux seules pages de produits et de collections, vous devez inclure cette ligne dans les balises de schema de la section :

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

L'attribut templates accepte une liste de chaînes qui représentent le type de page.

En fonction des fonctionnalités que vous souhaitez inclure dans votre thème ou des exigences spécifiques de votre client, vous créerez probablement une gamme de sections différentes qui activeront des fonctionnalités uniques. Pour voir des exemples de sections modulaires, vous pouvez explorer la section newsletter ou la section de texte enrichi utilisée dans Dawn.

Paramètres de section

Nous avons brièvement examiné comment les paramètres d'un fichier de section peuvent être utilisés pour créer des options de personnalisation auxquelles les marchands peuvent accéder, mais approfondissons-les un peu plus, pour voir comment ils sont construits.

Comme nous l'avons vu, les paramètres sont inclus dans les fichiers de section, à l'intérieur des balises {% schema %} , qui indiquent qu'il s'agit de paramètres qui doivent s'afficher sur l'interface utilisateur de l'éditeur de thème. Un exemple très simple de cela pourrait être vu avec une section de texte personnalisée qui pourrait ressembler à :

Dans cet exemple, nous avons deux éléments HTML : un élément d'en-tête et un élément de paragraphe. Chacun de ces éléments contient du contenu dynamique que nous avons créé avec l'objet liquide section.settings . Cet objet de section nous permet de récupérer les valeurs des paramètres en référençant l'identifiant unique du paramètre.

Sous le balisage HTML et Liquid, nous avons nos paramètres de section, contenus dans nos balises {% schema %} . Chaque paramètre est représenté par un objet, où nous pouvons définir l' id du paramètre, son type et comment il apparaîtra sur l'éditeur. Pour accéder au paramètre d'une section dans Liquid, ajoutez son id à l'objet liquide section.settings . Nous définissons également le type de paramètre dont il s'agit et comment il apparaîtra sur l'éditeur de thème.

Dans les paramètres de nos balises de schéma :

• id fait référence à la variable Liquid en cours de définition
• type définit le type de sortie que nous créons
• l' label fournit le contexte affiché sur l'éditeur de thème
• default attribue une valeur par défaut

Dans cet exemple, j'ai créé une zone de text pour notre en-tête et une zone de richtext pour notre corps, mais vous pouvez ajouter un large éventail de types de sortie, en fonction des besoins de votre client. Les autres types d'entrée valides incluent image_picker , radio , video_url et font_picker .

Cet exemple est maintenant une section valide, mais il nous manque un aspect clé : déterminer où exactement la section apparaîtra sur le thème. Nous explorerons quelques approches différentes pour inclure des sections plus tard, mais pour l'instant nous autoriserons l'ajout de la section via l'éditeur de thème à n'importe quelle page en créant des préréglages dans la section.

Les préréglages sont des configurations par défaut des sections et sont ajoutés dans les balises {% schema %} d'une section. Dans notre exemple simple, les préréglages pourraient ressembler à :

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

Une fois ajoutée à notre exemple, la section de zone de texte personnalisée ressemblerait à :

Maintenant, si nous naviguons vers l'éditeur de thème et sélectionnons Ajouter une section sur n'importe quelle page, cette section apparaîtra comme une option disponible. Les paramètres de section que nous avons créés apparaîtront dans la barre latérale droite avec les étiquettes et le texte par défaut que nous avons ajoutés, et nous pouvons remplir les paramètres de texte d'entrée, qui seront affichés dans notre section.

Il s'agit d'un exemple simple qui montre la relation entre les paramètres de section et les variables que vous pouvez créer dans les sections, ainsi que leur rendu dans l'éditeur de thème. Pour un modèle plus avancé, vous pouvez explorer la section de texte enrichi du thème Dawn.

Inclure des sections sur les pages

Comme nous l'avons déjà évoqué, il existe plusieurs méthodes pour inclure des sections sur les pages d'un thème. Explorons chacune de ces approches individuellement et décortiquons certaines des règles qui s'y appliquent.

1. Inclure des sections dans les modèles JSON

Lorsque nous avons examiné les sections de la page principale, nous avons constaté que les fichiers de modèle JSON acceptent une propriété "main" , qui devient la section par défaut pour ce type de page, et doit inclure tous les éléments de contenu importants pour cette page.

En plus d'une section "main" , il est également possible d'inclure d'autres sections dans un modèle JSON qui apparaîtront par défaut sur ce type de page. Si nous utilisons un modèle JSON de produit comme exemple, nous pourrions inclure une section de recommandations de produits sur la page en ajoutant un nouvel objet sous la section "main" :

Dans ce cas, nous attribuons un nom à la section, recommendations , et la propriété type est utilisée pour identifier le fichier du répertoire /sections que nous voulons inclure.

Étant donné que ce modèle JSON fait référence à plusieurs sections, nous devons définir comment les sections apparaissent séquentiellement, dans l'objet de order . Chaque section incluse dans un modèle JSON devra se voir attribuer un ordre par défaut, mais les marchands peuvent toujours réorganiser les sections sur l'éditeur de thème.

Les sections sans préréglages qui sont ajoutées aux modèles JSON ne peuvent pas être supprimées dans l'éditeur de thème, mais elles peuvent être masquées si un marchand n'en a pas besoin. Pour un exemple concret de la façon dont les sections peuvent être organisées dans un modèle JSON, vous pouvez explorer le modèle de produit Dawn.

2. Inclure des sections en tant qu'options sur toutes les pages

Comme nous l'avons vu avec notre texte personnalisé, il est possible de rendre une section disponible sur toutes les pages d'un thème lorsque des presets sont présents dans les paramètres du schema .

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

Lorsqu'elles sont incluses à l'aide de cette approche, ces sections peuvent être ajoutées, repositionnées et supprimées de l'éditeur de thème. Ces sections peuvent également être limitées à des pages spécifiques avec la propriété templates .

Cette fonctionnalité de glisser-déposer signifie que lorsque vous créez des sections dynamiques personnalisées, un large éventail d'options de personnalisation des magasins sera déverrouillé. Vous pouvez créer des sections mobiles pour des vidéos, des produits ou des galeries d'images. Un bon exemple de section utilisant cette méthode serait la section newsletter de Dawn.

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

La balise de section Liquid vous permet de restituer une section du répertoire /sections dans une mise en page Liquid ou un fichier de modèle. Cette balise pourrait apparaître comme :

 {% section 'header' %}

Les sections ajoutées à l'aide de cette balise de section ne peuvent pas être supprimées, repositionnées ou masquées dans l'éditeur de thème. La position de cette section sur la page est verrouillée, en fonction de l'endroit où elle a été ajoutée dans un fichier de mise en page ou un modèle.

Cette approche est la plus couramment utilisée pour le contenu et les composants qui doivent toujours être visibles, tels que les en-têtes, les pieds de page et les barres d'annonce. Pour en voir un exemple sur Dawn, vous pouvez consulter le fichier theme.liquid où la barre d'annonce statique, la section d'en-tête et le pied de page sont ajoutés avec la balise de section .

Stimuler la créativité

Maintenant que vous avez vu comment créer et ajouter des sections à vos thèmes, vous pouvez créer une infinité d'options pour les magasins de vos clients.

Travailler avec des modèles JSON libère la puissance des sections pour toutes les pages d'un thème, ce qui permettra aux marchands de créer leur boutique exactement comme ils le souhaitent, avec une certaine direction de votre part.