Blocs
Blocs de contenu
Texte, bouton, texte enrichi, 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 |
|---|---|---|---|---|
| Texte | ✓ | ✓ | ✓ | ✓ |
| Bouton | ✓ | ✓ | — | — |
| Texte enrichi | ✓ | ✓ | — | — |
| 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 produit) 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 : « Text » | — |
| 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 |
|---|---|---|
| Libellé du lienEN : Link label | TextePar défaut : « Discover » | — |
| 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 : « Use this text to share the things that do not fit in a product description: h… » | — |
| AlignementEN : Alignment | AlignementPar défaut : Gauche | — |
Ligne dépliante
Un titre qui déplie un texte 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 and care » | — |
| 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 : « Describe the material, its origin and how it should be looked after. » | — |
| 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).
- Une ligne dont le texte est vide ne s’affiche pas.
- Le texte 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 : « Describe the piece: what it is cut from, how it is made and how it is meant t… » | — |
| 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 : « Delivery and returns » | — |
| TitreEN : Heading | TextePar défaut : « Delivery and returns » | — |
| TexteEN : Text | Texte enrichiPar défaut : « Describe how the piece travels: the carrier, the timing, what the box contain… » | — |
Le tiroir s’ouvre depuis le bord de l’écran, 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.
Maison 1.0.0