Sections et blocs

Vous pouvez utiliser les sections de votre thème pour créer la mise en page que vous souhaitez pour votre boutique en ligne. Les sections sont composées de différents types de blocs qui ont chacun une fonction spécifique, comme le texte, les boutons, les images uniques, un collage d’images ou les liens.

Les sections et les blocs offrent de la flexibilité dans la manière dont vous organisez votre contenu et vous permettent de contrôler le style et l’apparence de votre boutique en ligne sans avoir à modifier le code. Ils incluent notamment les options de personnalisation suivantes :

• Vous pouvez réorganiser les sections dans vos modèles et réorganiser les blocs au sein des sections.
• Les sections et les blocs peuvent avoir des paramètres de personnalisation spécifiques.
• Vous pouvez connecter des sections et des blocs compatibles pour afficher des informations dynamiques sur votre boutique en ligne à partir de données personnalisées, comme l’ajout d’instructions d’entretien pour vos produits. En savoir plus sur la connexion de sources dynamiques.

Les sections et les blocs disponibles dans l’éditeur de thème dépendent de votre thème et de sa version. Par exemple, votre thème peut comporter un bloc Diapositive que vous pouvez ajouter uniquement à une section Diaporama, et un bloc de texte Titre que vous pouvez ajouter à toutes les sections de votre thème. Pour en savoir plus sur les options qui s’offrent à vous, consultez la documentation de votre thème.

Limites maximales des sections et des blocs

Les sections et les blocs sont soumis aux limitations maximales suivantes :

• Chaque modèle peut comporter jusqu’à 25 sections.
• Chaque modèle peut contenir jusqu’à 1 250 blocs répartis sur toutes les sections. Le nombre exact de blocs, ainsi que le nombre de chaque type de bloc que vous pouvez ajouter à chaque section, dépendent des sources de la section et du bloc et sont spécifiés par le concepteur de votre thème. Par exemple, si votre thème comporte une section Inscription à l’e-mail, vous ne pourrez peut-être ajouter qu’un seul bloc Formulaire d’e-mail.
• Les blocs qui prennent en charge l’imbrication peuvent avoir jusqu’à huit niveaux de blocs imbriqués.

Sources des blocs

Selon la structure de votre thème et les applis que vous avez installées, votre thème peut contenir diverses sections qui acceptent des blocs de différentes sources. Lorsque vous ajoutez un bloc à une section, tous les blocs disponibles pour cette section s’affichent dans le sélecteur de bloc. Selon votre thème et sa version, vous pouvez ajouter les types de blocs suivants aux sections de votre thème :

• Les blocs d’appli sont des blocs qui ajoutent des fonctionnalités à votre thème. Vous pouvez utiliser un bloc d’appli pour repositionner des zones de votre thème ajoutées par vos applis installées vers une zone spécifique d’une page de votre thème.
• Les blocs de section sont des blocs qui sont définis au sein d’une section spécifique.
• Les blocs de thème sont des blocs qui sont définis dans votre thème et qui peuvent avoir des fonctionnalités dynamiques, comme l’imbrication.

Votre thème peut contenir certaines sections qui utilisent des blocs de section et d’autres qui utilisent des blocs de thème. Une même section peut accepter soit des blocs de thème, soit des blocs de section, mais pas un mélange des deux.

La disponibilité des blocs d’appli au sein des sections dépend des fonctionnalités de l’appli et de la capacité de la section à accepter les blocs d’appli.

Blocs de section

Les blocs de section sont des blocs conçus pour une section spécifique. Une section peut avoir des limites pour les types de blocs de section, et limiter le nombre d’un certain type de bloc que vous pouvez ajouter.

Exemple d’une section avec des blocs de section

Par exemple, votre thème comporte une section Inscription à l’e-mail. Vous pouvez utiliser cette section pour ajouter un formulaire d’inscription à la newsletter afin que les clients puissent s’abonner à votre newsletter. Après avoir ajouté la section Inscription à l’e-mail, vous pouvez ajouter un bloc de chaque type parmi les suivants :

• un bloc Formulaire d’e-mail
• un bloc Titre
• un bloc Sous-titre

Si vous ajoutez le bloc Formulaire d’e-mail et que vous cliquez sur Ajouter un bloc pour ajouter un autre bloc, le bloc Formulaire d’e-mail ne s’affiche plus comme option dans le sélecteur de bloc. Cette limitation permet d’éviter tout problème de saisie de l’e-mail du client et garantit que ce dernier peut facilement saisir son adresse e-mail.

Si vous avez ajouté les trois blocs disponibles pour la section Inscription à l’e-mail, le sélecteur de bloc affiche un message indiquant que tous les blocs disponibles ont été utilisés.

Blocs de thème

Les blocs de thème sont des blocs définis dans votre thème et qui peuvent avoir des fonctionnalités dynamiques, comme l’imbrication. Les sections qui acceptent les blocs de thème peuvent accepter une variété de blocs différents, en fonction de la structure de la section. Une section qui accepte les blocs de thème peut accepter tous les blocs de thème disponibles, un sous-ensemble spécifique de blocs ou des blocs uniques à cette section. Les blocs de thème peuvent également avoir les comportements suivants :

• Certains blocs prennent en charge l’imbrication, de sorte que vous pouvez imbriquer des blocs dans d’autres blocs jusqu’à huit niveaux.
• Certaines sections ont des blocs obligatoires. Vous pouvez personnaliser ou masquer ces blocs, mais vous ne pouvez pas les réorganiser ou les supprimer.
• Certains blocs s’affichent automatiquement dans une section lorsque certaines conditions sont remplies.

Exemple d’une section avec des blocs de thème

Par exemple, votre thème comporte une section Diaporama avec des blocs de thème.

Dans la section Diaporama de votre thème, lorsque vous cliquez sur Ajouter un bloc, vous pouvez sélectionner un bloc Diapositive dans le sélecteur de bloc. Aucun autre type de bloc n’est disponible. Si vous essayez d’ajouter un bloc Diapositive à une autre section de votre thème, comme une section Bannière d’image, le bloc Diapositive n’est pas disponible. C’est un exemple de bloc restreint.

Après avoir ajouté un bloc Diapositive à la section Diaporama, vous pouvez cliquer sur Ajouter un bloc pour ajouter des blocs supplémentaires à n’importe quel bloc Diapositive de la section Diaporama, comme un bloc Titre, Image ou Bouton. Ces blocs sont imbriqués dans le bloc Diapositive. Il s’agit d’un exemple de bloc imbriqué.

Si vous ajoutez un deuxième bloc Diapositive à la section Diaporama, le thème ajoute automatiquement un bloc Commandes du diaporama. Ce bloc affiche des boutons sur lesquels les visiteurs de votre site peuvent cliquer pour naviguer d’une diapositive à l’autre. Vous pouvez personnaliser le style des boutons ou masquer les commandes, mais vous ne pouvez pas supprimer le bloc. Il s’agit d’un exemple de bloc obligatoire qui s’affiche de manière conditionnelle.

Compatibilité des blocs de thème

Pour accéder aux blocs de thème, votre thème doit comporter des sections qui les prennent en charge. Vous pouvez vérifier si votre thème prend en charge les blocs de thème dans le code de celui-ci. Si un répertoire blocks figure dans la barre latérale de l’éditeur Liquid, cela signifie que vous utilisez un thème qui prend en charge les blocs de thème. Vous pouvez également consulter la documentation de votre thème.

Étapes :

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

2. À côté du thème que vous souhaitez vérifier, cliquez sur le bouton , puis sur Modifier le code.

3. Dans la barre latérale, recherchez le dossier des blocs.

   

Personnalisation de vos modèles de thème avec des sections et des blocs

Lorsque vous ouvrez l’éditeur de thème, la page d’accueil de votre boutique se charge par défaut. Vous pouvez utiliser le menu déroulant pour sélectionner un autre modèle, tel que produits, collections, pages ou blogs, ou utiliser la barre de recherche dans le menu déroulant des modèles pour rechercher un modèle spécifique. Lorsque vous sélectionnez un modèle, il se charge dans l’éditeur de thème, et toutes les modifications que vous apportez sont prévisualisées dans l’éditeur.

Ajouter une section

Ajoutez une nouvelle section à n’importe quelle page de votre boutique en ligne.

Étapes :

Modifier une section

Réorganiser une section ou un bloc

Vous pouvez modifier l’ordre des sections sur vos modèles de page et réorganiser les blocs au sein de ces sections. De plus, vous pouvez déplacer des blocs compatibles entre différentes sections. Par exemple, si votre page d’accueil comporte deux sections Diaporama, vous pouvez faire glisser un bloc Diapositive d’un diaporama à l’autre.

Vous ne pouvez pas déplacer un bloc vers une autre section si le type de bloc est incompatible ou si la section a déjà atteint sa limite maximale de blocs. Si vous essayez de déplacer une section ou un bloc vers un emplacement non valide, l’élément reviendra à sa position d’origine.

Vous pouvez également utiliser l’inspecteur d’aperçu pour réorganiser les sections. En savoir plus sur l’utilisation de l’inspecteur d’aperçu dans l’éditeur de thème.

Étapes :

Dupliquer une section ou un bloc

Vous pouvez dupliquer une section ou un bloc pour en créer une copie identique.

Une fois que vous avez dupliqué un bloc, le nouveau bloc est ajouté à la même section. Si vous souhaitez déplacer le bloc vers une nouvelle section ou en modifier l’ordre, vous pouvez le réorganiser. Vous pouvez également copier un bloc, puis le coller directement dans une autre section.

Copier et coller des blocs

Si vous souhaitez utiliser le même bloc dans plusieurs sections, vous pouvez facilement le copier et le coller dans une autre section. Vous pouvez également copier et coller un bloc au sein de la même section, ou vous pouvez choisir de dupliquer le bloc à la place. Un bloc dupliqué conservera tous les paramètres et le contenu du bloc d’origine.

Étapes :

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

2. À côté du thème que vous souhaitez modifier, cliquez sur Modifier le thème.

3. Pour copier et coller un bloc sur votre page d’accueil, sélectionnez-le directement ou utilisez le menu déroulant Page d’accueil pour choisir le modèle qui contient la section ou le bloc que vous souhaitez modifier.

4. Faites un clic droit sur le bloc que vous souhaitez dupliquer, puis cliquez sur Copier.

5. Dans la même section, ou dans une section différente, faites un clic droit dans la section, puis cliquez sur Coller.

6. Cliquez sur Enregistrer.

Masquer ou supprimer une section ou un bloc

Renommer une section ou un bloc

Par défaut, le titre d’une section ou d’un bloc dans le menu de la barre latérale de l’éditeur de thème et les détails des paramètres est défini par le type de bloc ou de section, par exemple « Collection » ou « Texte ».

Pour les blocs, si les paramètres du bloc contiennent un champ de texte (un titre ou une description, par exemple), ce texte est également ajouté au titre dans le menu de la barre latérale. S’il existe plusieurs champs de texte, le premier qui est rempli est ajouté. Lorsque vous modifiez le texte du champ de texte, le titre du bloc est mis à jour pour inclure ce nouveau texte. Le nom d’une section ou d’un bloc ne peut pas être vide.

Par exemple, vous ajoutez une section Multicolonne à votre modèle de page avec des blocs Colonne. Le bloc de colonne comprend un paramètre Titre avec le texte par défaut Colonne et un paramètre Description avec le texte par défaut Associez du texte à une image pour mettre en avant le produit, la collection ou l’article de blog de votre choix.. Le titre de section par défaut est Multicolonne. Le titre de bloc Colonne par défaut est Colonne – Colonne. Si vous supprimez le texte du paramètre Titre, le titre du bloc est mis à jour et devient Colonne – Associez du texte à une im…

Vous pouvez donner un nom personnalisé à n’importe quelle section ou n’importe quel bloc depuis ses paramètres, dans le menu de la barre latérale de l’éditeur de thème.

Étapes :

Utiliser les blocs

Les blocs sont des modules personnalisables que vous utilisez pour ajouter du contenu aux sections de vos modèles. Vous pouvez utiliser des blocs pour ajouter du texte, des images, des liens, des boutons et plus encore.

Les thèmes Shopify ont des sections et des blocs que vous pouvez personnaliser. Certaines sections ont des types de blocs fixes, ce qui signifie que vous ne pouvez choisir que parmi les blocs mis à disposition pour cette section par le concepteur du thème.

D’autres sections vous permettent de sélectionner n’importe quel bloc, mais le nombre total de blocs que vous pouvez ajouter à la section est limité. Si votre section atteint le nombre maximal de blocs disponibles, l’option Ajouter un bloc est grisée et vous ne pouvez pas cliquer dessus ni appuyer dessus.

Vous pouvez utiliser la recherche pour trouver un bloc spécifique par son nom, ou sélectionner un bloc dans le menu déroulant du sélecteur de bloc. Les blocs de votre thème peuvent être triés par catégories dans le sélecteur de bloc, telles que Collection pour les blocs avec un sélecteur de collection, ou Média pour les blocs d’image et de vidéo.

Un aperçu du bloc s’affiche dans le sélecteur de bloc afin que vous puissiez examiner son affichage avant de l’ajouter.

Ajouter un bloc

Utiliser des champs méta et des métaobjets avec des sources dynamiques

Vous pouvez utiliser des champs méta et des métaobjets pour afficher des informations dynamiques sur votre boutique en ligne. Si vous avez un thème qui prend en charge les champs méta, vous pouvez alors connecter un champ méta à une section ou aux paramètres de bloc compatibles dans l’éditeur de thème.

Par exemple, si vous vendez des bougies, vous pourriez vouloir afficher la durée de combustion de chaque bougie disponible dans votre boutique. Après avoir configuré un champ méta de produit pour la Durée de combustion dans la section Données personnalisées des paramètres de votre interface administrateur Shopify, vous pouvez ajouter un bloc de texte à la section principale de votre modèle de produit. Dans le bloc de texte, vous pouvez cliquer sur le bouton dans les paramètres de texte et sélectionner le champ méta Durée de combustion. Les informations sur la durée de combustion s’afficheront désormais sur vos produits.

Si vous avez un thème Shopify, vous pouvez connecter la plupart des champs méta et des métaobjets à votre thème en utilisant l’éditeur de thème. Si vous utilisez d’autres thèmes, ou si vous souhaitez ajouter des types de données personnalisées que votre thème ne prend pas en charge, vous pouvez modifier le code de votre thème ou engager un Partenaire Shopify pour vous aider. En savoir plus sur la manière d’engager un Partenaire Shopify.

Les sections ou les blocs ne prennent pas tous en charge les sources dynamiques. Vérifiez la version de l’architecture de votre thème et les options de personnalisation disponibles dans l’éditeur de thème pour déterminer si votre thème prend en charge les sources dynamiques.

Vous pouvez afficher des informations dynamiques dans votre boutique en ligne en ajoutant des sections ou des blocs qui peuvent utiliser des sources dynamiques. Les sources dynamiques peuvent être utilisées dans n’importe quel modèle, section ou bloc qui affiche des ressources compatibles (produit, collection, page, blog et article de blog). Vous devez ajouter votre champ méta avant de pouvoir le connecter dans vos modèles. Reportez-vous à la section Sources dynamiques pour en savoir plus sur l’utilisation de champs méta et de métaobjets avec des sources dynamiques dans votre thème.

Une fois le processus de configuration terminé, suivez les étapes ci-dessous pour connecter des sources dynamiques à des sections ou à des blocs de votre thème à l’aide du bouton .

Étapes :

En savoir plus sur l’affichage des champs méta sur votre boutique en ligne et l’affichage des métaobjets sur votre boutique en ligne.

Sélecteur de source dynamique

Vous pouvez utiliser le sélecteur de source dynamique pour connecter la bonne source dynamique directement dans l’éditeur de thème. Passez en revue les principales caractéristiques suivantes du sélecteur de source dynamique :

• Vous pouvez référencer des sources dynamiques à partir de diverses ressources, le cas échéant. Par exemple, si vous connectez un paramètre à un bloc qui est connecté à la fois à une ressource de produit et à une ressource de page, vous pouvez alors utiliser le menu déroulant dans le sélecteur de source dynamique pour spécifier si vous souhaitez rechercher des champs méta associés à la ressource de produit ou à la ressource de page.
• Le sélecteur de source dynamique dispose d’une fonctionnalité de recherche et de filtre pour vous aider à trouver le champ méta dont vous avez besoin.
• Le sélecteur de source dynamique vous permet de choisir des champs méta de catégorie. Il s’agit d’attributs supplémentaires qui deviennent disponibles lorsque vous attribuez une catégorie de produit à un produit. L’accès à ces champs méta vous permet de connecter des sources dynamiques à tous les champs pertinents du métaobjet d’attribut sous-jacent.