Ajoutez un tableau des tailles à votre page produit

Comment afficher un tableau des tailles dans votre page produit ?

Option 1 : Utilisation de l'élément Image

Si vous disposez d'une image de tableau des tailles prédéfinie, vous pouvez facilement l'ajouter à votre page produit.

Étape 1 : Ouvrez votre page produit dans l'éditeur GemPages et recherchez le Élément d'image.

Étape 2 : Faites glisser l’élément depuis la barre latérale gauche et déposez-le à l’emplacement souhaité sur votre page.

Étape 3 : En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Source section, survolez l'image actuelle et cliquez Télécharger l'image.

Étape 4 : Une fois l'image du tableau des tailles téléchargée, vous pouvez modifier ses paramètres à votre guise.

Option 2 : Utilisation d'un code personnalisé

Étape 1 : Naviguez vers votre Administrateur Shopify > ProduitsSélectionnez le produit auquel vous souhaitez ajouter le tableau des tailles.

Étape 2 : En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Description section, créez un tableau des tailles en utilisant le lampe de table fonction. Une fois terminé, cliquez sur Enregistrer.

Étape 3 : Dans l'éditeur de description, passez en mode HTML en cliquant sur le bouton Afficher le HTML .

Copiez le code HTML de votre tableau des tailles.

Étape 4 : Dans l'éditeur GemPages, faites glisser le Code personnalisé un élément depuis la barre latérale et placez-le à l'endroit où vous souhaitez que le tableau des tailles apparaisse.

Étape 5 : En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Code personnalisé section, cliquez pour ouvrir le panneau de code.

Étape 6 : Collez le code HTML dans le Onglet HTML et frapper Enregistrer.

Vérifiez le résultat:

Option 3 : Utilisation d’applications tierces

Pour un tableau des tailles plus dynamique ou personnalisable, les applications tierces sont une excellente option. De nombreuses applications s'intègrent parfaitement à GemPages, offrant des fonctionnalités telles que des recommandations de tailles automatiques et une personnalisation avancée.

Pour explorer ces options, visitez Centre d'aide GemPages – Intégration du tableau des tailles pour un guide étape par étape sur l'utilisation des applications de tableaux de tailles populaires.

Bonne pratique : créer un tableau des tailles contextuel avec GemPages

Au lieu d'afficher le tableau des tailles directement sur la page du produit, vous pouvez le rendre plus convivial en l'affichant à l'intérieur d'un Apparaitre.

De cette façon, votre page reste propre et les clients peuvent ouvrir le graphique uniquement lorsqu'ils en ont besoin.

Pourquoi cela est recommandé :

• Maintient la page produit propre et sans distraction.
• Offre une meilleure expérience client : le tableau des tailles est toujours accessible, mais ne prend pas de place.
• Fonctionne parfaitement avec les tableaux de tailles d'images et de tableaux.

L'utilisation d'une fenêtre contextuelle pour votre tableau des tailles est l'approche la plus flexible et garantit que les clients peuvent facilement vérifier les tailles sans quitter la page du produit.

Suivez ces étapes ci-dessous pour créer une fenêtre contextuelle de tableau des tailles sur votre page :

Étape 1 : Une fois dans l'éditeur GemPages, utilisez la barre de recherche pour trouver l'élément contextuel. Glissez-déposez ensuite l'élément dans la zone de conception.

Étape 2 : Continuez à ajouter un élément d’image imbriqué dans la fenêtre contextuelle.

Étape 3 : Dans le panneau des paramètres de l'image, accédez à l' Source section et survolez l'image actuelle. Cliquez ensuite sur Télécharger l'image pour télécharger l'image de votre tableau des tailles.

Étape 4 : Cliquez en dehors de la fenêtre contextuelle, puis faites glisser et déposez un élément de bouton à la position souhaitée sur la page.

Étape 5 : Configurez le bouton comme vous le souhaitez dans le Paramètres languette.

Par exemple, vous pouvez modifier la couleur d’arrière-plan, ajuster la taille du bouton ou ajouter un effet de survol.

Modifiez ensuite le texte du bouton et configurez son style. Vous pouvez utiliser « Vérifiez votre taille » ou « Guide des tailles » pour inciter vos visiteurs à cliquer.

Étape 6 : Faites défiler jusqu'à la Lien section et activez-la. Ensuite, définissez la Après le clic = Ouvrir une fenêtre contextuelle, et sélectionnez la fenêtre contextuelle créée à l’étape 1 à 3.

Désormais, la fenêtre contextuelle apparaîtra une fois que vos visiteurs auront cliqué sur ce bouton.

Enregistrez et republiez votre page, et vous pourrez vérifier le résultat sur la boutique en direct.

Résultat: