Comment ajouter un guide des tailles sur Shopify : Guides par produit sans application séparée

Points clés à retenir

• Dawn peut afficher un guide des tailles sans application. Son bloc Pop-up ouvre n’importe quelle page de la boutique dans une boîte de dialogue, donc une page plus un bloc couvrent un guide pour toute la boutique.¹
• Différents guides par produit nécessitent un champ méta (metafield). Le tutoriel de Shopify utilise un metafield de produit de type Page, connecté au bloc Pop-up en tant que source dynamique.²
• Les métaobjets (metaobjects) sont rentables une fois que vous avez beaucoup de guides. Ils stockent les mesures sous forme de données structurées que vous pouvez afficher sous forme de tableau, basculer entre pouces et cm, et traduire.
• Publiez le guide sous forme de tableau HTML, et non pas seulement comme une image. Les lecteurs d’écran et les outils de traduction ne peuvent pas lire les mesures à l’intérieur d’une image.

Un guide des tailles Shopify n’a pas besoin d’une application dédiée : une page, un metafield et un bloc inclus avec Dawn suffisent pour la plupart des boutiques de vêtements, de chaussures et de bijoux. Ce guide montre comment ajouter un tableau des tailles dans Shopify de trois manières natives, puis aborde ce que les tutoriels de base ignorent : des guides différents pour différents produits, un balisage de tableau accessible, une mise en page mobile et un toggle pouces/cm.

Que vous l’appeliez tableau des tailles ou guide des tailles Shopify, la configuration reste la même.

Pourquoi vous pouvez nous faire confiance

Nous travaillons dans l’écosystème Shopify depuis plus de quatre ans et avons collaboré avec des centaines de marques Shopify sur leurs vitrines. Jacques a plus de 15 ans d’expérience en développement. Nous concevons Fudge, un éditeur de vitrine IA avec une note de 4.9 sur le Shopify App Store et le statut Built for Shopify. Les éléments de page produit comme un guide des tailles sont exactement le genre de code de thème qu’il écrit.

Quelles sont les méthodes pour ajouter un guide des tailles sur Shopify ?

Il existe quatre méthodes natives et une méthode via application. Choisissez en fonction du nombre de guides différents dont vous avez besoin.

Les étapes ci-dessous utilisent Dawn. D’autres thèmes nomment le bloc différemment : le bloc Lien pop-up d’Horizon (blocks/popup-link.liquid) est rempli de blocs imbriqués au lieu d’une page et peut s’ouvrir sous forme de tiroir (drawer).

Méthode 1 : Un seul guide des tailles Shopify pour toute la boutique

1. Allez dans Boutique en ligne → Pages → Ajouter une page. Nommez-la “Guide des tailles”, construisez le tableau avec le bouton Insérer un tableau de l’éditeur, réglez la Visibilité sur Visible et enregistrez.
2. Allez dans Boutique en ligne → Thèmes → Personnaliser, puis ouvrez votre modèle de produit (product template) depuis le menu déroulant des modèles.
3. Dans Informations sur le produit, cliquez sur Ajouter un bloc et choisissez Pop-up.
4. Définissez l’Étiquette du lien sur “Guide des tailles”, choisissez votre page dans le paramètre Page, et enregistrez.

Ce sont les deux seuls paramètres du bloc.¹ Le lien ouvre une boîte de dialogue affichant le titre et le contenu de la page. Faites glisser le bloc directement sous Sélecteur de variante (Variant picker) pour qu’il soit placé avec les options de taille.

Méthode 2 : Comment afficher un guide des tailles différent par produit ?

La réponse documentée de Shopify est un metafield de produit de type Page, connecté au bloc Pop-up en tant que source dynamique.² Le paramètre page du bloc accepte exactement ce type de metafield.³

1. Allez dans Paramètres → Champs méta et métaobjets → Produits → Ajouter une définition. Nommez-la “Guide des tailles”, cliquez sur Sélectionner un type, choisissez Page, et enregistrez. L’accès aux vitrines est activé par défaut.
2. Créez une page par guide : hauts, bas, chaussures, tailles de bagues.
3. Dans l’éditeur de thème, sélectionnez le bloc Pop-up, cliquez sur l’icône de source dynamique à côté de Page, et sélectionnez votre metafield Guide des tailles.
4. Sur chaque produit, ouvrez les Metafields du produit, cliquez sur Guide des tailles, et sélectionnez la bonne page. Un produit peut renvoyer vers une seule page.

Vous débutez avec les metafields ? Découvrez comment ajouter des metafields aux produits Shopify.

Le piège du lien vide

Le tutoriel de Shopify place le bloc sur un modèle de produit séparé, assigné uniquement aux produits avec un guide. Le code source de Dawn montre pourquoi : le bouton Pop-up est rendu sans vérifier si une page est définie, donc un produit avec un metafield vide obtient quand même le lien, ce qui ouvre une boîte de dialogue vide.¹

Pour conserver un seul modèle à la place, dupliquez d’abord votre thème, puis enveloppez le balisage d’ouverture existant dans sections/main-product.liquid avec une vérification de variable vide :

{%- when 'popup' -%}
  {%- if block.settings.page != blank -%}
    <modal-opener ...>
      ...
    </modal-opener>
  {%- endif -%}

Modèles alternatifs pour 2 à 4 types de guides

Si vous n’avez que quelques catégories, laissez tomber le metafield. Créez un modèle de produit par catégorie, chacun avec un bloc Pop-up pointant vers une page fixe, puis assignez-le sous Modèle de thème (Theme template) sur le produit ou via la colonne Modèle (Template) de l’éditeur en bloc. Un thème peut contenir 1 000 modèles au total.⁴ Consultez comment ajouter un modèle personnalisé dans Shopify pour connaître les étapes.

Les metafields de catégorie de Shopify sont différents : ils décrivent les attributs du produit comme la taille des vêtements, et non un tableau de mesures.

Méthode 3 : Guides des tailles structurés avec des metaobjects

Une page stocke un guide sous forme de texte formaté. Un metaobject le stocke sous forme de données avec des champs nommés, ce qui rend le changement d’unité, un balisage cohérent et la traduction très pratiques.

Cela vaut la configuration supplémentaire lorsque vous avez de nombreux guides ou que vous les réutilisez sur plusieurs marchés. Une définition peut comporter jusqu’à 40 champs et 1 000 000 d’entrées.⁵

Configurer la définition et la référence

1. Allez dans Contenu → Métaobjets → Ajouter une définition et nommez-la “Guide des tailles”.
2. Ajoutez les champs : Titre (texte à ligne unique), Mesures (JSON) et Notes de coupe (texte multiligne). Laissez Vitrines (Storefronts) sélectionné et activez les Traductions si vous vendez dans plus d’une langue.
3. Ajoutez une entrée par guide et gardez-la Active. Une entrée en brouillon ne renvoie rien en Liquid.⁵
4. Allez dans Paramètres → Champs méta et métaobjets → Produits → Ajouter une définition, choisissez le type Métaobjet (Metaobject), sélectionnez votre définition “Guide des tailles”, et enregistrez.
5. Sur chaque produit, sélectionnez l’entrée dans la section Metafields.

Stockez les deux unités dans le champ Mesures :

{
    "columns": ["Size", "Chest", "Waist"],
    "rows": [
        {"size": "S", "inches": ["34-36", "28-30"], "cm": ["86-91", "71-76"]},
        {"size": "M", "inches": ["38-40", "32-34"], "cm": ["97-102", "81-86"]}
    ]
}

L’afficher sous forme de tableau

Dawn n’a pas de bloc qui transforme un metaobject en tableau, cette méthode nécessite donc du Liquid. Dupliquez d’abord votre thème, puis ajoutez un bloc Liquid personnalisé sous le Sélecteur de variante et collez :

{%- assign chart = product.metafields.custom.size_chart.value -%}
{%- if chart != blank -%}
  {%- assign data = chart.measurements.value -%}
  <details class="size-chart" data-unit="in">
    <summary>Size guide</summary>
    <div class="size-chart__scroll" role="region" aria-labelledby="SizeChartCaption" tabindex="0">
      <table>
        <caption id="SizeChartCaption">{{ chart.title.value | escape }}</caption>
        <thead>
          <tr>
            {%- for column in data.columns -%}
              <th scope="col">{{ column | escape }}</th>
            {%- endfor -%}
          </tr>
        </thead>
        <tbody>
          {%- for row in data.rows -%}
            <tr>
              <th scope="row">{{ row.size | escape }}</th>
              {%- for inches in row.inches -%}
                <td>
                  <span class="u-in">{{ inches | escape }} in</span>
                  <span class="u-cm">{{ row.cm[forloop.index0] | escape }} cm</span>
                </td>
              {%- endfor -%}
            </tr>
          {%- endfor -%}
        </tbody>
      </table>
    </div>
    {%- if chart.fit_notes.value != blank -%}
      <p>{{ chart.fit_notes.value | escape | newline_to_br }}</p>
    {%- endif -%}
  </details>
{%- endif -%}

Ajustez custom.size_chart à l’espace de noms (namespace) et à la clé de votre metafield. L’élément details est un accordéon qui fonctionne sans JavaScript ; un drawer ou une modale (modal) nécessite plus de code. Le paramètre Liquid personnalisé accepte le HTML et le Liquid jusqu’à 50 ko, le CSS et le script plus bas peuvent donc vivre dans le même bloc.

La méthode Fudge. Fudge lit le metaobject et écrit la couche d’affichage. Dites à Fudge :

“Ajoute un lien ‘Guide des tailles’ à côté du sélecteur de taille sur les pages produits qui ouvre un drawer. Affiche le tableau des tailles à partir du metaobject de guide des tailles du produit sous forme de tableau accessible, avec un toggle pouces/cm qui mémorise le choix.”

Vous obtenez le code de thème natif sous forme de brouillon à revoir avant publication. Les mesures viennent toujours de vous et restent dans les metaobjects dans l’admin Shopify ; IA et metafields Shopify explique cette séparation.

Comment assigner des guides des tailles à grande échelle ?

L’éditeur en bloc (bulk editor). Sélectionnez des produits dans la liste des Produits, ouvrez l’éditeur en bloc, cliquez sur Colonnes et ajoutez votre metafield depuis la section Metafields. La page de Shopify n’indique pas quels types de metafields la grille peut modifier, alors essayez d’abord votre colonne guide des tailles sur quelques produits.⁶

Importation CSV. Le CSV produit accepte des colonnes metafield pour une liste fixe de types. list.metaobject_reference en fait partie ; le type Page et la référence metaobject simple n’y sont pas.⁶ Pour assigner des guides via une feuille de calcul, définissez le metafield comme une liste de valeurs et lisez la première entrée en Liquid.

Par type de produit en Liquid. Si vos types de produits sont cohérents, ignorez l’assignation par produit. Nommez chaque entrée pour que son identifiant (handle) corresponde à un type de produit, puis remplacez la première ligne de l’extrait de la Méthode 3 par :

{%- assign chart = product.metafields.custom.size_chart.value -%}
{%- if chart == blank -%}
  {%- assign type_handle = product.type | handleize -%}
  {%- assign chart = metaobjects.size_chart[type_handle] -%}
{%- endif -%}

Ici, size_chart est le type de la définition du metaobject. Un produit de type “Tops” (Hauts) récupère l’entrée avec le handle tops, et un metafield spécifique au produit reste prioritaire. Le même modèle fonctionne avec les pages via pages[handle], ou avec une vérification de tag comme product.tags contains 'chart-tops'.

La méthode Fudge. Décrivez la règle et Fudge écrit le code Liquid pour vous. Dites à Fudge :

“Utilise un guide des tailles différent pour les hauts, les bas et les chaussures en fonction du type de produit, et masque le lien du guide des tailles sur les produits qui n’en ont pas.”

Fudge rédige la règle dans votre thème sous forme de brouillon. C’est toujours vous qui créez les trois guides dans l’admin.

Qu’est-ce qui rend un guide des tailles Shopify accessible ?

Utilisez un vrai tableau HTML. Un lecteur d’écran ou une application de traduction ne peut pas lire de chiffres à l’intérieur d’une image, donc un guide uniquement composé d’images échoue au critère WCAG 1.1.1 Contenu non textuel, à moins que la même information ne soit répétée sous forme de texte.⁷

Les relations entre les tailles et les mesures doivent également se trouver dans le balisage, ce qui correspond au critère WCAG 1.3.1 Information et relations.⁷ En pratique :

• Un caption (légende) nommant le guide, par exemple “Hauts pour femmes - mensurations du corps”.
• Des en-têtes de colonnes en tant que cellules th avec scope="col", et la taille de chaque ligne en tant que th avec scope="row".
• Un conteneur de défilement avec tabindex="0", role="region" et un nom accessible, pour que les utilisateurs au clavier puissent faire défiler un tableau large.
• Un contraste de texte d’au moins 4.5:1 (WCAG 1.4.3), y compris pour les éventuelles rayures zébrées pâles.

<div class="size-chart__scroll" role="region" aria-labelledby="chart-caption" tabindex="0">
    <table>
        <caption id="chart-caption">
            Women's tops - body measurements
        </caption>
        <thead>
            <tr>
                <th scope="col">Size</th>
                <th scope="col">Chest</th>
                <th scope="col">Waist</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">S</th>
                <td>34-36 in</td>
                <td>28-30 in</td>
            </tr>
        </tbody>
    </table>
</div>

La page d’aide de Shopify pour l’outil de tableau de l’éditeur couvre les lignes et les colonnes, mais pas les légendes ni les cellules d’en-tête. Cliquez sur Afficher le HTML (Show HTML) dans l’éditeur de page pour vérifier le balisage et l’ajuster manuellement.

Le pop-up a aussi des règles. Une boîte de dialogue doit piéger le focus, se fermer avec Échap et renvoyer le focus au lien qui l’a ouverte. Le bloc Pop-up de Dawn fait les trois : son code source définit role="dialog" et aria-modal="true", boucle la touche Tab à l’intérieur de la boîte de dialogue, se ferme avec Échap ou un clic en dehors, et rend le focus à l’élément déclencheur.⁸ Un petit accroc : il affiche le titre de la page comme un second h1 sur la page produit.

Notre Checklist WCAG 2.2 AA pour Shopify couvre le reste de la page produit.

Comment doit fonctionner un guide des tailles sur mobile ?

Un tableau de six colonnes ne tiendra pas sur l’écran d’un téléphone, et c’est acceptable : le critère WCAG 1.4.10 Redimensionnement du texte exempte les tableaux de données, car les lignes et les colonnes n’ont de sens qu’en deux dimensions.

Défilement horizontal, avec un indice. Dawn le fait déjà à l’intérieur de son pop-up : en dessous de 750 px, sa feuille de style règle les tableaux sur overflow-x: auto.¹ Laissez la dernière colonne visible paraître coupée, ou ajoutez une ligne “Faites défiler pour plus de tailles”, afin que les acheteurs sachent qu’il y en a plus.

Épingler la première colonne. Une fois que les étiquettes de taille défilent hors de l’écran, les chiffres perdent leur sens. Des en-têtes de ligne collants (sticky) résolvent ce problème et sont plus faciles à comparer qu’une disposition empilée d’une carte par taille :

.size-chart__scroll {
    overflow-x: auto;
}
.size-chart__scroll th[scope='row'] {
    position: sticky;
    left: 0;
    background: #fff;
}

Attention aux cibles tactiles. Le WCAG 2.5.8 fixe un minimum de 24 par 24 pixels CSS. Dawn donne à son lien pop-up une min-height de 4.4rem ; donnez aux boutons d’unité un espace similaire.

Drawer ou modale ? Sur les téléphones, un drawer (tiroir) inférieur permet de garder le produit visible derrière ; une modale centrée donne plus d’espace à un tableau large sur bureau. Les deux nécessitent le même comportement au clavier.

La méthode Fudge. Fudge modifie la mise en page dans le CSS et le balisage de votre thème. Dites à Fudge :

“Sur mobile, fais défiler le tableau des tailles horizontalement avec la première colonne épinglée.”

Le changement arrive sous forme de brouillon que vous pouvez prévisualiser sur un téléphone avant de le publier.

Comment ajouter un toggle pouces/cm ?

Stockez les deux unités au lieu de convertir à la volée. Une valeur convertie comme 87,63 cm doit être arrondie, et les conversions arrondies ne correspondront pas toujours aux spécifications métriques de votre fabricant. C’est pourquoi le champ Mesures ci-dessus contient inches et cm.

Le code Liquid de la Méthode 3 affiche déjà les deux valeurs dans chaque cellule. Ajoutez deux boutons dans l’élément size-chart, au-dessus du tableau :

<div role="group" aria-label="Measurement units">
    <button type="button" data-set-unit="in" aria-pressed="true">Inches</button>
    <button type="button" data-set-unit="cm" aria-pressed="false">Centimetres</button>
</div>

.size-chart[data-unit='in'] .u-cm,
.size-chart[data-unit='cm'] .u-in {
    display: none;
}

document.querySelectorAll('.size-chart').forEach(function (chart) {
    var buttons = chart.querySelectorAll('[data-set-unit]')

    function setUnit(unit) {
        chart.dataset.unit = unit
        buttons.forEach(function (button) {
            button.setAttribute('aria-pressed', String(button.dataset.setUnit === unit))
        })
        try {
            localStorage.setItem('sizeChartUnit', unit)
        } catch (e) {}
    }

    var saved = null
    try {
        saved = localStorage.getItem('sizeChartUnit')
    } catch (e) {}
    if (saved === 'in' || saved === 'cm') setUnit(saved)

    buttons.forEach(function (button) {
        button.addEventListener('click', function () {
            setUnit(button.dataset.setUnit)
        })
    })
})

aria-pressed indique aux technologies d’assistance quelle unité est active, et les libellés restent les mêmes dans les deux états, comme l’exige le modèle de bouton toggle (bascule) du W3C. Le choix est sauvegardé dans le localStorage, de sorte qu’il soit conservé pour le prochain produit.

Les tailles internationales sont un besoin connexe. Les tailles US, UK et EU sont des étiquettes, pas des conversions, alors ajoutez-les comme colonnes supplémentaires à partir des spécifications de votre fabricant.

Où doit se trouver le lien du guide des tailles, et que doit-on mettre au-delà du tableau ?

Placez le lien à côté du sélecteur de taille, car c’est là que la question se pose. Pour une disposition plus large, voir comment personnaliser une page produit Shopify.

Un tableau de chiffres n’est qu’une partie d’un guide utile. Ajoutez :

• Comment mesurer. Une ligne par mesure, indiquant où placer le mètre ruban.
• Mensurations du corps ou du vêtement. Précisez ce que le tableau affiche.
• Taille du mannequin et taille portée, près des images du produit.
• Notes de coupe (Fit notes) par produit : taille petit, coupe ample, prendre une taille au-dessus pour superposer.

Les boutiques de mode trouveront d’autres idées de mise en page dans Design de boutique Shopify pour la mode.

Quand une application de guide des tailles est-elle le bon choix ?

Les méthodes natives couvrent l’affichage d’un guide. Une application a sa place lorsque vous avez besoin de quelque chose au-delà de l’affichage :

• Recommandations de taille. Un quiz qui demande la taille, le poids et les préférences de coupe, puis suggère une taille nécessite une logique et des données qu’un extrait de thème ne possède pas.
• De très grands catalogues avec des guides fournis par les fournisseurs. Si des centaines de marques envoient chacune leur propre guide, un outil conçu pour les importer et les mapper fait gagner du temps de gestion.

Vérifiez la liste de l’App Store pour les tarifs actuels. Pour l’affichage seul, un tableau natif dans votre thème, écrit à la main ou avec l’éditeur de boutique Shopify, est suffisant.

FAQ