Blocs
Blocs de contenu
Texte, bouton, texte enrichi, image, ligne dépliante, texte dépliant, tiroir, groupe et code Liquid.
Sur cette page
Les blocs de contenu sont des blocs de thème : les mêmes blocs se retrouvent dans plusieurs sections, et certains peuvent être imbriqués dans des groupes.
Où les utiliser
| Bloc | Page produit / Produit en vedette | Section Page | Section personnalisée | Dans un Groupe | Dans une Ligne dépliante | Fenêtre contextuelle | En-tête de collection |
|---|---|---|---|---|---|---|---|
| Texte | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Bouton | ✓ | ✓ | — | — | — | ✓ | ✓ |
| Texte enrichi | ✓ | ✓ | — | — | ✓ | ✓ | ✓ |
| Image | ✓ | — | — | — | ✓ | — | — |
| Ligne dépliante | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Texte dépliant | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Tiroir | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Groupe | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Code Liquid personnalisé | ✓ | ✓ | ✓ | ✓ | ✓ | — | — |
Dans la page produit et le produit en vedette, les groupes de produits (Colonne produit, Ligne de produits) acceptent tous les blocs, y compris les blocs produit. Voir Blocs produit.
Texte
Une ligne de texte simple : un titre, un sous-titre, une accroche.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| TexteEN : Text | TextePar défaut : « Texte » | — |
| Style de texteEN : Text style |
| — |
| Balise sémantiqueEN : Semantic tag |
| Change la signification du texte pour les lecteurs d’écran et les moteurs de recherche, pas son apparence. N’utilisez un titre que là où il nomme le contenu qui suit. |
| AlignementEN : Alignment | AlignementPar défaut : Gauche | — |
Style de texte change l’aspect (Titre, Sous-titre, Texte normal) ; Balise sémantique change ce que le texte représente pour les lecteurs d’écran et les moteurs de recherche, sans changer son aspect. N’utilisez une balise de titre que si le texte nomme le contenu qui suit.
Bouton
Un lien présenté en bouton.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Texte du boutonEN : Button label | TextePar défaut : « Découvrir » | — |
| LienEN : Link | Lien | — |
| Style de boutonEN : Button style |
| — |
| AlignementEN : Alignment | AlignementPar défaut : Gauche | — |
Choisissez le style selon ce que le bouton engage : Plein pour l’action principale de la zone, Contour pour une alternative, Souligné pour une suite discrète. Évitez deux boutons pleins côte à côte. Voir Les boutons.
Texte enrichi
Un paragraphe mis en forme : gras, italique, liens, listes.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| TexteEN : Text | Texte enrichiPar défaut : « <p>Utilisez ce texte pour dire ce qui ne tient pas dans une description de produit : comment une pièce est faite, qui l’a faite, et ce qu’elle demande de vous.</p> » | — |
| AlignementEN : Alignment | AlignementPar défaut : Gauche | — |
Placé directement dans le module d’achat, sur la page produit ou dans la section Produit en vedette, il est composé dans le petit corps de texte des autres lignes secondaires du module.
Image
Une image sur toute la largeur de son conteneur : un gros plan d’étoffe dans une ligne dépliante, un certificat sous la description.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Image | Image | — |
Le texte alternatif de l’image est celui du fichier dans Shopify. Sans image, le bloc n’affiche rien, pas même une image d’exemple : reliez Image à un métachamp produit (icône de source dynamique) qui contient un fichier, et les produits qui n’en ont pas n’affichent simplement rien.
Ligne dépliante
Un titre qui déplie son contenu au clic : idéal pour la composition, l’entretien, la livraison ou une FAQ.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| TitreEN : Heading | TextePar défaut : « Composition et entretien » | — |
| Niveau de titreEN : Heading level |
| Un niveau en dessous du titre de la section ou du bloc dans lequel il se trouve. |
| TexteEN : Text | Texte enrichiPar défaut : « <p>Décrivez la matière, son origine et la façon de l’entretenir.</p> » | — |
| Ouvert par défautEN : Open by default | Case à cocherPar défaut : Désactivé | — |
- Choisissez le Niveau de titre un cran en dessous du titre de la section qui contient la ligne (Titre 3 sous un Titre 2, par exemple).
- La ligne peut aussi contenir des blocs Texte, Texte enrichi, Image et Code Liquid personnalisé : ajoutez-les sous la ligne dans l’éditeur de thème. Ils s’affichent après le Texte de la ligne, dans leur ordre.
- Une ligne ne s’affiche pas quand son texte est vide et que ses blocs n’affichent rien.
- Le texte, ou un bloc Image placé dans la ligne, peut être relié à un métachamp (icône de source dynamique) pour afficher un contenu propre à chaque produit.
Texte dépliant
Un texte long affiché sur quelques lignes, avec un bouton Lire plus / Lire moins.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| TexteEN : Text | Texte enrichiPar défaut : « <p>Décrivez la pièce : dans quoi elle est taillée, comment elle est fabriquée et comment elle se porte.</p> » | — |
| Lignes visiblesEN : Visible lines | De 2 à 12Par défaut : 4 | — |
Le bouton n’apparaît que si le texte dépasse le nombre de Lignes visibles. Sur la page produit livrée, ce bloc affiche la description du produit (source dynamique Description du produit).
Tiroir
Un lien qui ouvre un panneau latéral : « Guide des tailles », « Livraison et retours », « Entretien ». Le contenu reste à portée sans allonger la page.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Libellé du déclencheurEN : Trigger label | TextePar défaut : « Livraison et retours » | — |
| TitreEN : Heading | TextePar défaut : « Livraison et retours » | — |
| TexteEN : Text | Texte enrichiPar défaut : « <p>Décrivez le voyage de la pièce : le transporteur, le délai, ce que contient la boîte et comment se fait un retour.</p> » | — |
Le tiroir s’ouvre depuis le côté vers lequel pointe sa flèche (la droite, dans les langues qui se lisent de gauche à droite), se ferme avec la croix ou la touche Échap, et renvoie le focus sur le lien. Sans JavaScript, il se comporte comme une ligne dépliante. Un tiroir dont le texte est vide ne s’affiche pas.
Groupe
Un conteneur qui dispose plusieurs blocs en colonne ou en ligne. Deux préréglages : Colonne et Ligne, dans la catégorie Mise en page.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Sens de la mise en pageEN : Layout direction |
| — |
| AlignementEN : Alignment |
| —Affiché lorsque « Sens de la mise en page » vaut « Vertical ». |
| Marge intérieureEN : Padding |
| — |
Un groupe accepte les blocs Texte, Ligne dépliante, Texte dépliant, Code Liquid personnalisé, Tiroir et d’autres Groupes. Utilisez une Ligne pour placer deux textes côte à côte, une Colonne avec une marge intérieure pour isoler un ensemble.
Code Liquid personnalisé
Du code Liquid ou HTML inséré à l’intérieur d’une section, par exemple un widget d’application dans la page produit.
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Code LiquidEN : Liquid code | Code Liquid | Ajoutez des extraits d’application ou tout autre code pour des personnalisations avancées. En savoir plus |
| Libellé accessibleEN : Accessible label | Texte | Nomme cette zone pour les lecteurs d’écran et en fait un repère qu’ils peuvent atteindre directement. Laissez vide pour un contenu décoratif ou une intégration d’application. |
| Utiliser les styles de texte du thèmeEN : Use theme text styles | Case à cocherPar défaut : Activé | Applique les styles de titres, listes et liens du thème au contenu. Désactivez lorsqu’une application apporte ses propres styles. |
Tant qu’aucun code n’est saisi, le bloc affiche un texte d’aide, y compris en ligne. Voir aussi la section Code Liquid personnalisé et Modifier le code.
Faubourg 1.1.0