Bloc guide des tailles avec bouton declencheur personnalisable, contenu riche ou page Shopify, tableau de données et modale responsive.
Guide des tailles
Le bloc Size Chart affiche un bouton qui ouvre un guide des tailles dans une modale popup. C'est un outil essentiel pour les boutiques de mode, chaussures et accessoires : il réduit les retours en aidant le client a choisir la bonne taille avant d'acheter.
Fonctionnement
- Le bloc affiche un bouton ou lien sur la page produit (généralement placé près du sélecteur de taille)
- Le client clique sur le bouton
- Une modale s'ouvre avec le guide des tailles
- Le client consulte les mesures et identifie sa taille
- Il ferme la modale et sélectionné la bonne taille
- Il poursuit son achat en toute confiance
💡Placez le bloc Size Chart juste après le bloc Variant Option qui affiche les tailles. Le client verra le lien exactement au moment ou il doit choisir sa taille, la ou il en a besoin.
Le bouton déclencheur
Le bouton qui ouvre la modale est entièrement personnalisable.
Styles de bouton
| Style | Description | Usage recommande |
|---|---|---|
| Lien | Texte souligne, discret | Quand l'espace est limité, integration subtile |
| Outline | Bouton avec bordure, sans fond | Bon compromis entre visibilité et discretion |
| Filled | Bouton avec fond coloré | Maximum de visibilité, quand le guide est important |
Settings du bouton
| Setting | Description | Options |
|---|---|---|
| Texte | Label du bouton | Texte libre ("Guide des tailles", "Trouver ma taille", "Quelle taille choisir ?") |
| Icône | Icône à côté du texte | Réglé / Question / Taille / Aucune |
| Style | Apparence du déclencheur | Lien / Outline / Filled |
| Position | Alignement horizontal du bouton | Gauche / Centre / Droite |
| Marge inférieure | Espace sous le bloc | 0 a 100px |
💡Un texte engageant comme "Trouver ma taille" ou "Quelle taille choisir ?" est plus efficace qu'un simple "Guide des tailles". Il invite le client a cliquer et l'aide dans son processus de decision.
Contenu de la modale
Le guide des tailles supporte deux sources de contenu différentes.
Source 1 : Contenu riche (Rich Text)
Le contenu est saisi directement dans le setting du bloc via l'éditeur de texte enrichi de Shopify. Vous pouvez y integrer :
- Des tableaux de correspondance (via l'éditeur HTML)
- Du texte explicatif (comment prendre ses mesures)
- Des images (schemas de mesure)
- Des listes de conseils
| Setting | Description |
|---|---|
| Contenu | Éditeur richtext avec support HTML complet |
ℹ️L'éditeur richtext de Shopify supporte les tableaux HTML. Vous pouvez créer des tableaux de correspondance directement dans le contenu du bloc. Pour inserer un tableau, passez en mode HTML dans l'éditeur et utilisez les balises
<table>, <tr>, <th>, <td>.Source 2 : Page Shopify
Le contenu est tire d'une page Shopify existante. C'est la méthode recommandée pour les guides de tailles détaillés ou partages entre plusieurs produits.
| Setting | Description |
|---|---|
| Page | Selection d'une page Shopify existante via le sélecteur |
💡Créez des pages dédiées dans votre admin Shopify (Boutique en ligne > Pages) : - "Guide des tailles - Vetements" pour les hauts, pantalons, robes - "Guide des tailles - Chaussures" pour les pointures - "Guide des tailles - Accessoires" pour les ceintures, bagues, etc. Reutilisez ensuite la bonne page dans le bloc Size Chart de chaque produit.
Apparence de la modale
| Setting | Description | Options |
|---|---|---|
| Titre de la modale | Titre affiche en haut de la modale | Texte libre (défaut : "Guide des tailles") |
| Taille | Largeur de la modale | Medium / Large / XL |
Exemple de contenu
Voici un exemple type de guide des tailles pour des vetements feminins :
Tableau de correspondance
| Taille | Tour de poitrine | Tour de taille | Tour de hanches | Equivalent EU |
|---|---|---|---|---|
| XS | 82 - 86 cm | 62 - 66 cm | 86 - 90 cm | 34 |
| S | 86 - 90 cm | 66 - 70 cm | 90 - 94 cm | 36 |
| M | 90 - 94 cm | 70 - 74 cm | 94 - 98 cm | 38 |
| L | 94 - 98 cm | 74 - 78 cm | 98 - 102 cm | 40 |
| XL | 98 - 102 cm | 78 - 82 cm | 102 - 106 cm | 42 |
| XXL | 102 - 106 cm | 82 - 86 cm | 106 - 110 cm | 44 |
Conseils de mesure
Le guide devrait également inclure :
- Comment mesurer : Instructions claires avec un schema visuel montrant ou placer le metre ruban
- Entre deux tailles : "Si vous êtes entre deux tailles, nous recommandons de prendre la taille supérieure"
- Fit du produit : "Ce modèle taille normalement / grand / petit"
- Unites : Indiquer les mesures en cm ET en pouces pour les boutiques internationales
Accessibilité
La modale respecte toutes les bonnes pratiques d'accessibilité :
| Aspect | Implementation |
|---|---|
| Focus trap | Le focus clavier reste dans la modale tant qu'elle est ouverte |
| Fermeture Escape | La touche Echap ferme la modale |
| Fermeture overlay | Clic sur le fond sombre ferme la modale |
| Bouton X | Bouton de fermeture visible en haut à droite |
| ARIA | role="dialog", aria-modal="true", aria-label avec le titre |
| Retour focus | Le focus retourne sur le bouton déclencheur après fermeture |
Comportement responsive
| Aspect | Desktop | Tablette | Mobile |
|---|---|---|---|
| Modale | Centree, largeur configurable | Centree, largeur réduite | Plein écran ou bottom sheet |
| Scroll | Scroll interne si contenu long | Scroll interne | Scroll natif du body |
| Tableau | Affichage normal en colonnes | Affichage normal | Scroll horizontal si trop de colonnes |
| Bouton fermeture | Bouton X en haut à droite | Bouton X | Bouton X + swipe down |
⚠️Les tableaux avec beaucoup de colonnes (6+) peuvent être difficiles a lire sur mobile. Le thème ajoute automatiquement un scroll horizontal, mais privilégiez un format compact (4-5 colonnes maximum). Vous pouvez aussi créer un layout spécifique mobile avec les mesures empilées verticalement.
Guide par type de produit
Vetements
| Colonne | Description |
|---|---|
| Taille | XS, S, M, L, XL, XXL |
| Tour de poitrine | En cm |
| Tour de taille | En cm |
| Tour de hanches | En cm |
Chaussures
| Colonne | Description |
|---|---|
| Taille EU | 36, 37, 38... |
| Taille UK | 3, 4, 5... |
| Taille US | 5, 6, 7... |
| Longueur du pied | En cm |
Bagues et bijoux
| Colonne | Description |
|---|---|
| Taille | 48, 50, 52... |
| Diamètre | En mm |
| Circonference | En mm |
| Equivalent US | 4, 5, 6... |
Bonnes pratiques
- Positionnement : Placez le bloc juste après le sélecteur de taille, pas en bas de la page. Le client a besoin du guide au moment ou il choisit sa taille
- Texte du bouton : Utilisez un texte engageant comme "Trouver ma taille" ou "Pas sur de votre taille ?" plutôt que simplement "Guide des tailles"
- Schema visuel : Ajoutez toujours un schema montrant ou prendre les mesures sur le corps. Une image vaut mille mots pour ce type de guide
- Unites multiples : Indiquez les mesures en cm ET en pouces pour les boutiques internationales
- Specifique au produit : Si possible, utilisez des guides différents selon les catégories. Les mesures pour un t-shirt ne sont pas les mêmes que pour un pantalon ou des chaussures
- Conseil "entre deux tailles" : Ajoutez toujours un conseil pour les clients entre deux tailles. "Prenez la taille supérieure" est le conseil le plus courant
- Mise à jour : Gardez les guides à jour quand vous ajoutez de nouvelles tailles ou que les mesures changent entre les collections
- Page partagee : Utilisez une page Shopify comme source plutôt que le richtext si vous avez le même guide pour plusieurs produits. Cela facilite la maintenance : une modification de la page met à jour tous les produits
Prochaines étapes
- Blocs page produit — Tous les blocs de la page produit
- Options de variantes — Swatches et sélecteurs de taille
- Contenu repliable — Alternative pour afficher le guide des tailles
- Tableau comparatif — Pour comparer les tailles entre modèles