Blocs de thème Shopify : comment fonctionnent les sections et les blocs

Une page produit ne se résume pas à un titre, une photo et un bouton. La façon dont vous agencez ces éléments détermine la facilité avec laquelle vos visiteurs trouvent les informations, comparent les options et passent à l’étape suivante. Les blocs de thème Shopify sont des briques plus petites, à l’intérieur d’une section : vous pouvez en modifier le contenu et l’ordre sans reconstruire toute la page. Une section d’informations produit peut par exemple contenir un titre, un prix, une description et un bouton d’achat. Nos blocs de réassurance Shopify illustrent le type de contenu complémentaire que les marchands aiment placer à côté des informations produit.

Les blocs ne forment pas un menu universel de fonctionnalités interchangeables. C’est votre thème qui détermine les blocs disponibles, les sections qui les acceptent et la possibilité d’imbriquer un bloc dans un autre. Les limites documentées par Shopify distinguent aussi le nombre total de blocs qu’un modèle peut contenir du nombre autorisé dans une section donnée : les options de l’éditeur comptent donc autant que la structure de votre thème.

Comment les sections et les blocs s’articulent-ils ?

Voyez un modèle comme la structure d’un type de page, par exemple la page produit. Une section est une grande zone de la page, comme les informations principales du produit ou la bannière d’une collection. Les blocs se placent à l’intérieur des sections et gèrent des éléments plus petits : texte, images, boutons ou informations produit.

Dans l’éditeur de thème, vous pouvez réorganiser les sections d’un modèle et les blocs d’une section, tant que le thème le permet. Le centre d’aide de Shopify indique une limite de 25 sections et de 1 250 blocs par modèle ; les blocs réellement disponibles dans chaque section dépendent du thème. Ces limites comptent lorsque vous préparez une page riche en zones de contenu, mais elles ne signifient pas que chaque section accepte tous les blocs. Consultez la documentation de Shopify sur les sections et les blocs pour lire l’explication de la plateforme.

Une page produit peut par exemple utiliser une section d’informations produit pour le titre, le prix et les commandes d’achat, suivie d’une section distincte pour un guide d’entretien. Cette section pourrait contenir un titre, une image et plusieurs blocs de texte. Traiter ces éléments comme des pièces séparées permet de modifier le contenu plus facilement, sans changer la structure générale de la page.

Quels types de blocs Shopify pouvez-vous utiliser ?

Les choix possibles dépendent de votre thème, de la section et des apps installées. Parmi les exemples courants : titre, texte, image, bouton, informations produit et blocs d’app. Certaines sections proposent un jeu de blocs restreint, pensé pour un usage précis, quand d’autres offrent un choix plus large.

Shopify distingue les blocs de section, propres à une section donnée, des blocs de thème, réutilisables dans toutes les sections compatibles. Les blocs d’app proviennent des apps installées et ajoutent du contenu ou des fonctionnalités fournis par l’app dans les zones prévues. La documentation développeur de Shopify explique aussi comment imbriquer des blocs de thème lorsque le thème et le bloc parent prennent en charge cette structure. À retenir : le nom d’un bloc ne suffit pas à savoir où il peut être utilisé ; vérifiez le sélecteur de blocs et la documentation de votre thème. Lisez la présentation de l’architecture des blocs par Shopify pour plus de détails techniques.

Comment ajouter et organiser des blocs dans l’éditeur de thème ?

Ouvrez d’abord l’éditeur de thème et choisissez le modèle de page à modifier. Sélectionnez une section dans la barre latérale de l’éditeur, puis utilisez ses commandes de blocs pour ajouter, supprimer, modifier ou réordonner les éléments disponibles. Prévisualisez la page au fil de vos modifications, surtout si vous changez l’ordre des informations produit ou si vous ajoutez du contenu sous la zone produit principale.

Imaginez que vous vouliez ajouter une courte note sur la coupe à une page produit. Si la section produit propose un bloc de texte, placez-le près du sélecteur de taille : vos visiteurs le verront là où il est utile. Si cette section ne propose pas le bloc dont vous avez besoin, vérifiez si une autre section le prend en charge ou si le thème prévoit une option dédiée au guide des tailles. L’éditeur n’affiche que les blocs pris en charge par le thème et la section sélectionnés.

Comment choisir des blocs utiles pour une boutique ?

Choisissez un bloc parce qu’il répond à une question de vos visiteurs ou les aide à accomplir une action, pas simplement parce qu’il est disponible. Sur une page produit, une image nette, des informations concises et un bouton d’achat bien visible seront souvent plus utiles qu’un long empilement de contenus sans rapport. Sur une page de collection, les cartes produit et les options de tri répondent à un autre besoin. Le bon agencement dépend de ce que vos visiteurs attendent à ce moment précis de leur parcours.

Regardez comment chaque bloc se lit sur un téléphone, où une longue suite de contenus peut repousser les informations clés plus bas dans la page. Vérifiez que les paramètres sont compréhensibles, que les blocs peuvent être réordonnés et qu’un bloc d’app est bien nécessaire pour une fonctionnalité que vous utilisez déjà. Pour les équipes techniques, le thème de référence de Shopify montre comment le développement d’un thème structure les blocs réutilisables et les blocs propres à une section.

Quels blocs aident à présenter les produits et à inspirer confiance ?

Pour les informations produit, les blocs d’image, de texte et d’icône aident à organiser le contenu en zones faciles à parcourir. Une boutique de soins de la peau peut par exemple associer une image du produit à une courte explication des ingrédients, puis placer à proximité les informations de livraison et de retour. Une boutique de vêtements peut afficher une note sur la coupe et un lien vers le guide des tailles près du sélecteur de taille. Gardez chaque élément centré sur un seul sujet, et assurez-vous que les images et les textes restent lisibles sur mobile.

Certains thèmes incluent des types de blocs dédiés à ces usages. Nos blocs d’image Shopify mettent en valeur les détails visuels d’un produit, tandis que les blocs d’icône avec texte offrent une autre façon de présenter des informations complémentaires concises. Pour indiquer clairement l’étape suivante, les blocs de bouton Shopify se placent là où un appel à l’action a sa place. Les options disponibles dépendent du thème et de la section.

Que vérifier avant de choisir un thème ?

Ne jugez pas un thème au seul nombre de blocs qu’il annonce. Vérifiez que ses blocs correspondent aux besoins récurrents de votre boutique, que les sections acceptent les blocs que vous comptez utiliser et que la mise en page reste simple à modifier. Une multitude de petits réglages qui se recoupent peut rendre une page plus difficile à maintenir ; les recommandations de Shopify aux développeurs conseillent d’ailleurs de garder une structure de blocs utile et des paramètres en rapport avec le bloc.

Avant de vous engager, testez une page représentative. Essayez de déplacer un bloc, de modifier ses paramètres et de prévisualiser le résultat en largeur mobile et ordinateur. Si le contenu de vos apps compte pour votre boutique, assurez-vous que les sections concernées prennent en charge les blocs d’app. Ce test concret montre si la flexibilité du thème correspond à votre façon de travailler.

Comment le thème FullStack utilise-t-il les blocs Shopify ?

FullStack est un exemple de thème qui fait des blocs les briques de la mise en page. Dans sa version 2.5.0, le thème FullStack réunit 100+ fonctionnalités natives, réparties sur 35 sections, 44 blocs publics et 60 blocs privés. Son bloc Groupe prend en charge les mises en page flex ou grille, les blocs imbriqués et 29 préréglages de composition : les marchands disposent ainsi de plusieurs façons d’organiser les éléments compatibles au sein d’une mise en page.

Cette structure est utile lorsque vous voulez remodeler une section plutôt que d’accepter un agencement figé. Elle rend aussi l’expérience d’édition d’un thème digne d’être testée : regardez comment les blocs sont regroupés, quels paramètres sont proposés et si les structures disponibles conviennent à vos pages. Le thème FullStack est conçu par l’équipe de The Deployer, une agence CRO Shopify forte de plus de 150 refontes de boutiques et de centaines de tests A/B ; les mises en page par blocs du thème sont une traduction concrète de ce travail, pas la promesse d’un résultat précis.

Construisez des mises en page Shopify plus flexibles

Quand les options de blocs d’un thème correspondent aux besoins de votre boutique, vous organisez vos contenus directement dans l’éditeur Shopify, au lieu de traiter chaque changement de mise en page comme un projet sur mesure. Le thème FullStack réunit dans un seul thème des sections, des blocs publics et privés et des mises en page imbriquées.

Découvrez les fonctionnalités du thème Shopify pour voir comment les sections et les blocs de FullStack sont structurés, notamment son bloc Groupe avec mises en page flex ou grille, imbrication libre et 29 préréglages de composition.