Comment utiliser les blocs de thèmes Shopify

Lors de la création de vitrines virtuelles sur Shopify, il est essentiel d'inclure des options permettant aux marchands de personnaliser leur thème et de développer le potentiel de leur boutique. Donnez plus de flexibilité à vos thèmes en utilisant des blocs de sections. Ceux-ci ajoutent de nouvelles fonctionnalités et permettent aux marchands de contrôler le design de leur boutique.

Comme nous l'avons vu dans notre article précédent, « Comment créer sa première section de thème Shopify », avec Online Store 2.0 (Boutique en ligne 2.0), il est désormais possible de déplacer des sections sur n'importe quelle page d'une boutique. Les blocs, eux, permettent de repositionner les éléments au sein d’une section.

Dans cet article, nous allons :

• Apprendre à créer des blocs de base dans une section,
• Voir comment implémenter des blocs pour la plupart des éléments d'une page,
• Découvrir comment les blocs d'applications peuvent optimiser l'expérience des marchands qui cherchent à améliorer les fonctionnalités de leur boutique,
• Partager les bonnes pratiques à suivre,
• Présenter des exemples réels tirés de notre thème Dawn (dont le code source est disponible).

Que sont les blocs de thèmes ?

Les blocs sont des modules de contenu qui peuvent être ajoutés, supprimés et réorganisés au sein d’une section. Ils permettent aux marchands d'avoir un contrôle précis sur le design de chaque élément de leur boutique en ligne. Chaque section peut contenir un maximum de 16 blocs.

Il est possible d’ajouter différents types de blocs à une même section et de modifier leur position directement depuis l'éditeur de thème. Un bloc peut être une image, une vidéo, un texte personnalisé ou tout autre type de paramètre d’entrée défini dans notre documentation pour les développeurs.

Il est important d'avoir une vision et un objectif clairs pour chaque section lorsque vous choisissez les types de blocs à utiliser. Votre thème doit être intuitif et empêcher les marchands de faire des modifications qui pourraient nuire au design de leur boutique. Par exemple, un bloc d’inscription à la newsletter ne sera pas adapté dans une section de produit en vedette, mais une option pour ajouter un bloc de texte personnalisé pourrait être utile dans ce contexte.

Lorsque vous créez des thèmes Shopify, vous pouvez décider quels éléments d'une page peuvent être des blocs, et définir des règles pour déterminer comment chaque bloc apparaît et quels paramètres il peut contenir. Nous reviendrons plus tard sur les avantages qu’offre le fait de transformer presque tous les éléments d'une section en blocs.

Puisqu’un même bloc peut être utilisé plusieurs fois, il est essentiel de définir des limites dans certains cas, afin d’éviter des problèmes liés à l’interface utilisateur. Par exemple, si vous créez un bloc avec du contenu vidéo, vous pouvez être tenté de permettre l'ajout d'un grand nombre de blocs vidéo à une section. Mais cela aurait un impact sur la durée de chargement du site et cela risquerait de donner des pages très encombrées. Il serait plus sage de limiter l'affichage à une seule vidéo. À vous de doser correctement toutes les possibilités offertes par les blocs !

Création de blocs de thèmes de base

La création de blocs vous demandera de passer du temps dans la zone de schéma de vos fichiers de section, pour définir les différentes valeurs et les paramètres de vos blocs. Si vous ne connaissez pas déjà le format du schéma de section, vous pouvez découvrir comment les attributs et les propriétés sont organisés à l'aide de JSON dans notre documentation pour les développeurs.

Nous allons ici créer un pied de page très simple, pour expliquer comment inclure plusieurs blocs dans une section. Commençons par examiner la section complète, puis analysons chaque partie séparément :

Dans l'exemple ci-dessus, nous avons défini deux éléments de contenu pour notre pied de page simple : un lien hypertexte et un champ de texte personnalisé. Chacun de ces éléments est encapsulé dans son propre conteneur, avec des classes « link » et « text ». Nous utiliserons également les attributs block.shopify_attributes pour ajouter des attributs de données à chaque élément. L’API JavaScript de l’éditeur de thème utilise les attributs shopify_attributes des blocs pour les identifier et pour écouter les événements.

Comme pour les sections, les objets d’un bloc sont ajoutés aux fichiers de section Liquid et leurs paramètres sont définis entre les balises de schéma. Pour les blocs, la syntaxe de ces objets est {{ block.settings.id }}, où l’identifiant id est référencé dans la section de schéma.

Dans le cas de notre bloc de lien, nous avons deux paramètres que nous référencerons dans le schéma de section : l'URL du lien (block.settings.linkurl) et le texte de l’hyperlien (block.settings.linktext).

Notez aussi que les conteneurs de blocs sont encapsulés dans une boucle {% for %}, qui se répète pour chaque bloc dans section.blocks. Vous pouvez voir cette boucle {% for %} en haut de notre fichier de section :

{% for block in section.blocks %}

À l'intérieur de cette boucle for, nous allons utiliser les balises de contrôle de flux case et when pour afficher chaque bloc. Nous pouvons définir des conditions qui ciblent le type de bloc et qui génèrent le balisage lorsqu'un marchand ajoute un bloc spécifique dans l'éditeur de thème.

Voici comment configurer les balises de contrôle de flux pour nos blocs de lien et de texte personnalisé :

Dans notre premier élément de bloc, nous allons générer un lien, ce qui signifie que nous pouvons utiliser le filtre d’URL Liquid link_to pour créer un lien HTML. Lorsque nous créerons nos paramètres pour ce bloc, l’URL du lien sera le paramètre qui est passé à ce filtre.

Si nous examinons le schéma de section, nous constatons qu'il existe une limite au nombre de blocs pouvant être ajoutés : "max_blocks": 8,. Cela signifie qu'un marchand peut ajouter ici toute combinaison de 8 blocs disponibles. Rappelons que la limite maximale dans une section est de 16 blocs.

Ensuite, nous avons l'attribut blocks, où nous pouvons créer des tableaux pour nos deux blocs.Nous pouvons attribuer un type à chaque bloc (une valeur au choix) et un nom qui apparaîtra dans l'éditeur de thème, ainsi que des paramètres, settings, pour le bloc, qui forment leur propre tableau séparé.

Chaque paramètre de bloc a son propre id que nous pouvons référencer dans le balisage, ainsi qu'un type qui permet de le définir et un élément label qui apparaîtra dans l'interface utilisateur de l'éditeur de thème. Retrouvez dans notre documentation pour les développeurs tous les paramètres d’entrée disponibles pour l’attribut type des paramètres de bloc.

Notre bloc de lien a deux paramètres : un pour permettre à un marchand de définir une URL et un autre pour saisir le texte de l'hyperlien.

Notre bloc de texte personnalisé n'a qu'un seul paramètre, pour inclure plusieurs lignes de texte, avec notre type d'entrée textarea. Nous pouvons référencer ce paramètre dans notre balisage avec l'identifiant custom-text-field (block.settings.custom-text-field).

Il n’y a pas de presets (paramètres prédéfinis) dans cette section, puisqu’il s’agit d'une section de pied de page statique. Nous devons donc inclure la section dans le fichier de mise en page theme.liquid en utilisant la balise section qui référence le nom du fichier. Dans notre cas, cela pourrait être :

{% section 'footer-simple' %}

Une fois ce code ajouté, la section apparaît sur la vitrine et les blocs peuvent être personnalisés et repositionnés depuis l'éditeur de thème.

Vous remarquerez que toute combinaison de liens et d'éléments de texte personnalisés peut être ajoutée, jusqu'à notre limite de 8 blocs. Bien que des feuilles CSS doivent être ajoutées à nos classes de conteneur pour que le style des blocs soit correct, nous avons maintenant une section fonctionnelle. Vous savez désormais comment construire des configurations plus complexes de blocs pour votre thème.

Si vous souhaitez voir une version plus complète d’une section de pied de page qui utilise des blocs, consultez le pied de page de Dawn dans ce dépôt GitHub.

Utilisation de blocs de thèmes pour la plupart des éléments d'une section

L’éventail d'exigences des marchands en termes de mise en page est très large. Il est donc recommandé d’inclure par défaut autant de flexibilité et d'options personnalisables que possible lorsque vous développez votre thème. C’est ce que permettent de faire les blocs de section. Vous voudrez peut-être donner aux marchands un contrôle très précis sur la plupart des éléments d'une section dans certaines zones de la boutique en ligne.

Cela peut être le cas pour le formulaire produit ou la section principale de la page de produit. Celle-ci est l’une des zones les plus importantes d'une boutique, pour laquelle les marchands ont en général besoin d’une personnalisation très poussée. D’ailleurs, l'une des exigences pour soumettre un thème à la boutique des thèmes de Shopify est que les thèmes doivent prendre en charge les blocs pour la plupart des éléments (voire tous les éléments) de la section principale de la page de produit.

Dans la pratique, cela signifie que les éléments tels que le titre du produit, le prix, la description du produit, le distributeur et les boutons d'achat doivent chacun constituer un bloc distinct. Cette approche permet aux marchands de repositionner tous ces éléments dans la page selon leurs préférences de design. Voici un exemple concret avec le thème Dawn :

En faisant simplement glisser des éléments, les marchands peuvent rapidement trouver le design qu'ils veulent pour leur page de produit, sans avoir à se plonger dans les paramètres ou à modifier le code de leur thème. Pour parvenir à cette solution simple, nous pouvons prendre chaque élément individuel et le recréer comme un bloc.

Nous pouvons par exemple coder une partie d'une section principale d’une page de produit comme ceci :

Si nous voulons ajouter la prise en charge des blocs pour le titre, le prix, le distributeur et la description du produit, nous devons d'abord ajouter la propriété « blocks » dans le schéma de section et créer des objets JSON pour chacun des éléments.

Ensuite, nous devons encapsuler tous les éléments HTML et Liquid dans la même boucle {% for %} et les mêmes instructions case/when que celles que nous avons utilisées précédemment, qui vont se répéter sur les blocs de la section pour générer chacun de nos blocs :

Maintenant, tous nos éléments sont des blocs. Mais ils ne seront pas affichés sur la page de produit, bien qu'ils puissent être sélectionnés dans l'éditeur de thème. La dernière étape consiste donc à modifier le fichier template product.json pour définir les blocs qui apparaissent par défaut et l’ordre de chaque bloc.

Dans le template JSON, nous devons ajouter le code ci-dessous pour déterminer quels blocs doivent être ajoutés par défaut, ainsi que l'ordre des blocs :

Une fois ce code ajouté, voici le contenu complet du fichier product.json :

Si nous affichons maintenant la page du produit, nous voyons nos éléments apparaître. Ils peuvent être repositionnés verticalement dans la section.

 

Ce processus peut être répété pour tous les autres éléments d'une page que les marchands peuvent avoir besoin de déplacer par glisser-déposer. Pour découvrir un exemple plus complet de cette approche, consultez la section principale de la page de produit de notre thème Dawn.

Ajout de la prise en charge des blocs d'applications

Online Store 2.0 a introduit les extensions d'applications pour les thèmes, une approche améliorée de l'intégration des applications à une boutique. Les extensions d’applications pour les thèmes permettent d'injecter des composants et du contenu en ligne sur une page en tant que bloc d’application, que les marchands peuvent ensuite ajouter et configurer directement depuis l’éditeur de thème.

Pour qu'un bloc d'application puisse être ajouté à une page, la section doit prendre en charge les blocs d’applications. Le schéma de section doit être configuré de façon appropriée et une balise de rendu doit être ajoutée dans le balisage. Vous pouvez également créer une section apps.liquid spécifiquement pour encapsuler les blocs d'applications.

Lorsque vous soumettez un thème pour la boutique des thèmes de Shopify, la section principale de la page de produit et la section de produit en vedette doivent toutes les deux impérativement prendre en charge les blocs d’applications. Idéalement, vous pouvez aller plus loin et ajouter la prise en charge des blocs d'applications à d'autres sections pertinentes, comme la section de panier. Cela permettra d'augmenter la compatibilité de votre thème avec les applications et d'améliorer l'expérience globale du marchand.

Tous les blocs d'applications sont de type @app. L'approche pour ajouter la prise en charge des blocs d'applications sera donc la même pour toutes les applications et tous les thèmes. La première étape consiste à définir un bloc de type @app dans le schéma de section. Ajoutons ce bloc dans notre exemple précédent de section main-product.liquid :

Nous devons ensuite créer une nouvelle instruction when pour le bloc d'application dans notre boucle for section.blocks existante et utiliser {% render block %} pour que le bloc d'application soit accessible dans l'éditeur de thème.

Nous pouvons maintenant ajouter nos blocs d'applications lorsque nous personnalisons cette section depuis l’éditeur de thème. Seules les applications qui ont été mises à jour pour utiliser les extensions d'applications pour les thèmes seront disponibles ici.

Ajouter la prise en charge des blocs d'applications vous permet de différencier votre thème et de faciliter son utilisation par les marchands. Vous pouvez tester les blocs d'applications avec l'application d’évaluation de produit, une application de démonstration qui a été migrée pour utiliser les extensions d'application pour les thèmes.

Créez de nouvelles opportunités avec les blocs

Maintenant que vous savez comment prendre en charge les blocs dans vos thèmes, vous pouvez imaginer une infinité d’options pour les boutiques des marchands. Pour en savoir plus sur la façon dont les blocs doivent apparaître et être conçus pour optimiser l’interface utilisateur, consultez notre documentation pour les développeurs sur la disposition des blocs. Il est également fortement recommandé de tester votre thème sur différentes tailles d'écran pour vous assurer que tous vos éléments s'affichent comme prévu. En implémentant des blocs dans les sections, en permettant le déplacement des éléments dans les sections principales et en ajoutant la prise en charge des blocs d’applications, vous pourrez offrir aux marchands des thèmes robustes, à la fois flexibles et fonctionnels.

---

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.