Éléments de variantes et d'échantillons de produits

À propos des variantes de produits et des échantillons

Contrairement à la version précédente de l'éditeur, Éditeur v7 comporte un seul élément appelé (P) Variantes et échantillons pour afficher différentes options d'un produit, telles que la taille, la couleur, les matériaux, etc., pour augmenter votre taux de conversion.

Dans GemPages V7, le Variantes et échantillons de produits element vous permet d'afficher toutes les options de variantes de produits dans une interface unique et personnalisable, des menus déroulants aux échantillons de couleurs en passant par les miniatures d'images.

Cas d'utilisation courants:

• Laissez les clients choisir la taille, la couleur ou le matériau
• Afficher visuellement l'état de rupture de stock
• Utilisez des images variantes ou téléchargez des échantillons visuels personnalisés

Comment ajouter des variantes de produits dans Shopify

Avant d'afficher les variantes dans le Élément Variantes de produits et échantillonsVous devez d'abord créer ces variantes dans les paramètres de vos produits Shopify.

Suivez ces étapes pour ajouter des variantes de produits dans Shopify :

Étape 1 : Depuis votre interface administrateur Shopify, accédez à Produits.

Étape 2 : Cliquez sur le produit auquel vous souhaitez ajouter des variantes.

Étape 3 : Faites défiler jusqu'à Variantes section et cliquez + Ajouter des options comme la taille ou la couleur.

Étape 4 : Entrer le nom de l'option (par exemple : taille, couleur, matière).

Étape 5 : Ajoutez le valeurs d'option.

Exemple :

• Taille: S, M, L, XL
• Couleurs : rouge, noir, vert

Étape 6 : Cliquez à nouveau sur OKShopify générera alors automatiquement toutes les combinaisons de variantes.

Étape 7 : Configurez les détails supplémentaires de la variante, tels que :

• Tarif
• SKU
• Inventaire
• Image variante
• Disponibilité

Étape 8 : Cliquez à nouveau sur Enregistrer.

Une fois les variantes créées, elles apparaîtront automatiquement dans le Élément « Variantes et échantillons de produits » dans GemPages, permettant aux clients de sélectionner différentes options de produit sur votre page produit.

Comment ajouter un élément de variantes et d'échantillons de produits à votre page ?

Suivez ces étapes pour ajouter une variante de produit et des échantillons à votre page créée avec GemPages.

Étape 1 : Depuis votre interface administrateur Shopify, accédez à la Générateur de pages GemPages application> Pages. Cliquez sur votre page cible pour localiser l'éditeur.

Étape 2 : Dans la barre latérale gauche, utilisez la barre de recherche pour localiser les variantes de produits et Éléments des échantillonsEnsuite, faites glisser et déposez l'élément à l'intérieur d'un élément Produit.

Étape 3 : Cliquez sur l'élément pour ouvrir sa configuration.

Configurer l'onglet Paramètres

À partir de là, vous pouvez configurer les paramètres de l'élément, notamment :

Origine du produit

Si vous avez attribué un produit à ce modèle, ce produit sera automatiquement synchronisé en tant que Origine du produit.

Si vous souhaitez sélectionner un autre produit, survolez le produit actuel et cliquez sur le bouton correspondant. flèche droite pour localiser les paramètres de l'élément de produit, où vous pourrez choisir celui que vous préférez.

Cliquez sur stylo Cliquez sur l'icône permettant de modifier la source du produit. Vous pouvez ensuite sélectionner manuellement le produit souhaité.

Type

Vous pouvez choisir entre deux options à ce stade :

• Combiné: Toutes les variantes seront regroupées dans un seul menu déroulant.

• Séparé: Les variantes seront organisées en catégories distinctes.

Plusieurs paramètres suivants seront ajustés en fonction du type que vous sélectionnez ici.

• Si vous définissez le Type à Combinécliquez ici pour plus de conseils.
• Si vous définissez le Type à Séparécliquez ici pour des instructions détaillées.

#1. Type : Combiné

Si vous définissez le Type à Combiné, continuez à configurer l'affichage des options de variante pour votre produit.

Style de texte

Le Style de texte Cette section vous permet de contrôler l'apparence du texte de vos variantes de produits, vous aidant ainsi à maintenir une cohérence avec votre identité visuelle.

• Modes: Choisissez un style de texte prédéfini, tel que Titre ou Paragraphe, pour assurer la cohérence de votre typographie avec le reste de votre boutique.
• De la police: Choisissez une police dans le menu déroulant ou utilisez votre police personnalisée depuis les Styles globaux. Pour une présentation harmonieuse, utilisez la même famille de polices que sur vos pages produits.
• Dimensions Ajustez la taille de la police pour que les noms des variantes et les prix ressortent clairement dans la mise en page.
• Couleur : Choisissez une couleur de texte dans le sélecteur de couleurs ou saisissez un code HEX (par exemple, #3B3B3BUtilisez une teinte foncée pour une meilleure lisibilité.
• Aligner: Alignez le texte à gauche, au centre ou à droite selon vos préférences de mise en page. L'alignement à gauche est idéal pour les listes de variantes.
• Poids de la police : Contrôlez la mise en gras du texte : de léger à très gras. Pour les variantes de produits, les options Moyen ou Gras sont généralement idéales.
• Hauteur de la ligne: Ajustez l'espacement vertical entre les lignes de texte (par exemple, 150 %) pour rendre le texte multiligne plus lisible.
• L'espacement des lettres: Ajustez l'espacement entre les lettres pour un rendu plus serré ou plus aéré.
• Transformer: Modifiez la casse du texte (majuscules, minuscules ou mise en majuscules pour chaque mot). Idéal pour les noms de variantes de type SKU ou étiquette.
• Ombre: Ajoutez une ombre portée subtile au texte pour augmenter le contraste ou donner de la profondeur à votre texte lorsqu'il se superpose à des fonds clairs.

Style d'option

Le Style d'option Cette section vous permet de personnaliser l'apparence de votre sélecteur de variantes de produit, notamment sa taille, son arrière-plan et son aspect général.

• Largeur: Ajustez la largeur de la boîte d'options. Vous pouvez définir une valeur fixe en pixels ou utiliser un pourcentage (par exemple, 100%) pour qu'il s'étende sur toute la largeur du récipient.
• La taille: Définissez la taille verticale du sélecteur de variantes (par exemple, 45px) pour un meilleur équilibre visuel avec les autres éléments de la page produit.
• Mise en contexte: Choisissez une couleur de fond pour la boîte d'options. Utilisez des tons unis (comme le noir ou le blanc) ou la couleur d'accentuation de votre marque pour un contraste plus marqué.
• Frontière: Ajoutez ou supprimez une bordure autour du sélecteur. Vous pouvez choisir entre un style linéaire, tireté ou pointillé et ajuster la couleur en fonction de votre mise en page.
• Coin: Arrondissez les bords de votre boîte d'options en définissant des valeurs de rayon d'angle (par exemple, 18pxCela crée une apparence plus douce et moderne.
• Ombre: Ajoutez une profondeur subtile en appliquant des effets d'ombre derrière la boîte. Idéal pour mettre en valeur l'état actif ou survolé.

Effet de survol

Le Effet de survol Cette section vous permet de définir comment l'option de variante réagit lorsque les acheteurs survolent l'option avec leur souris.

• Mise en contexte: Modifiez la couleur d'arrière-plan qui apparaît lorsque l'utilisateur survole la variante. Utilisez la couleur d'accentuation de votre marque (par exemple, #EC6448) pour le faire ressortir.
• Couleur du texte: Définir la couleur du texte au survol. Une couleur claire comme le blanc (#FFFFFF) fonctionne mieux sur des fonds sombres ou contrastés.
• Frontière: Personnalisez le style de la bordure (ligne continue, tirets, pointillés) pour rendre l'effet de survol plus visible. Vous pouvez également ajuster la couleur de la bordure pour qu'elle s'harmonise avec l'arrière-plan.
• Coin: Conservez ou accentuez l'arrondi des angles pour une transition visuelle plus fluide au survol de la souris.
• Ombre: Ajoutez un léger effet d'ombre pour donner l'impression que l'option survolée est en relief ou interactive. Idéal pour améliorer le retour tactile au clic.

#2. Type : Séparé

Si vous définissez le Type à Séparé, continuez à configurer l'affichage des options de variante pour votre produit.

Écart d'options

Ajustez l'espacement entre les variantes en saisissant un nombre exact dans la case ou en faisant glisser le curseur.

Titre de l'option

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). Titre de l'option Dans la section, sélectionnez la position du titre. Vous pouvez choisir entre deux options : verticale et horizontale.

• Position verticale :

• Position horizontale:

Ensuite, ajustez l'espace entre le titre et le texte de la variante pour une meilleure lisibilité. Par exemple, nous avons défini Écart à 40 px.

Ensuite, cliquez sur la case à côté de Style de texte Pour ouvrir le panneau de configuration du style de texte, vous pouvez modifier les styles, la police, la taille et la couleur du texte, ainsi que l'espacement des lettres, ou encore ajouter un effet d'ombre au titre de la variante.

Une fois terminé avec le Titre de l'option (Titre de la variante), vous pouvez configurer chaque option de variante dans les sections suivantes.

Par exemple, puisque nous avons trois variantes pour cette palette de gemmes, nous pouvons modifier la visibilité de chacune d'elles dans l'ordre suivant : Couleur, Finition/Texture et Taille.

Option : Couleur

Dans cette section, vous pouvez configurer toutes les options de couleur de cet élément.

Décomposons chaque option de réglage :

• Type de presse Choisissez parmi ces options disponibles, y compris Déroulante, Sélection des boutons, Image Shopify, Nuancier de couleurs, ou Télécharger l'image.

Par exemple, si vous sélectionnez Style = Échantillon de couleurcliquez Modifier la couleur ouvrir le Configurer le style des variantes panneau pour des réglages supplémentaires.

Si vous souhaitez télécharger de nouvelles images pour chaque option de couleur, sélectionnez Style = Télécharger l'image.

Veuillez noter qu'une seule image est affichée pour chaque option. Si vous préférez ajouter davantage d'images, vous devez ajouter le même nombre d'options de variantes dans Shopify.

• Largeur et hauteur : Ajustez la largeur et la hauteur de l'option de couleur.
• Écart de valeur : Modifiez l’espacement entre chaque option.

• Frontière: Ajoutez la bordure pour les options de couleur et modifiez la couleur, l'épaisseur et le contour de la bordure selon vos préférences.

• Coin: Ajustez le rayon des angles. Par exemple, pour afficher des options de couleur arrondies, définissez le rayon sur 999999.
• Ombre: Pour améliorer l’interface utilisateur, vous pouvez ajouter un effet d’ombre pour les options de couleur.

• Flotter: Cliquez sur Style case à côté de la Flotter pour ouvrir ses paramètres, où vous pouvez modifier l'effet de survol.
• Actif: Personnalisez l'option de couleur active pour la rendre différente des autres.

Texte de valeur d'option

Dans cette section, vous pouvez modifier la valeur du texte pour les options de couleur des styles, de la police, de la taille, de l'épaisseur de la police, de la hauteur de ligne, de l'espacement des lettres et de la transformation.

Style épuisé

Choisissez le style visuel lorsqu'une option de couleur est épuisée :

• Aucun: Aucun signal pour l'option couleur épuisée.
• Non cliquable : Les visiteurs ne peuvent pas cliquer sur l'option de couleur épuisée.
• Biffer: L'option de couleur épuisée sera barrée.

Par exemple, nous avons défini le Type à Non cliquable:

Taille

Utilisez le bouton Taille section permettant de contrôler la largeur de votre sélecteur de variantes ou de votre zone d'échantillons.

Largeur: Ajustez la largeur de l'élément en utilisant soit une valeur fixe en pixels (par exemple, 500px) ou un pourcentage (100%) selon votre configuration.

• Les largeurs plus importantes créent un menu déroulant sur toute la ligne.
• Les largeurs réduites sont idéales pour les listes de variantes compactes.

Forme

Le Forme Cette section vous permet de personnaliser l'apparence de votre conteneur de variante, y compris les bordures et les coins.

• Frontière: Ajoutez ou modifiez le style de bordure (ligne, tirets, pointillés) pour encadrer votre sélecteur de variantes.
• Coin: Arrondissez les bords de la boîte (par exemple, 18px) pour un rendu visuel moderne et fluide.
• Ombre: Ajoutez de la profondeur avec des ombres subtiles pour séparer les boîtes de variantes de l'arrière-plan. Choisissez parmi Léger, Moyen, or Forte en fonction du contraste souhaité.

Option d'affichage

Le Option d'affichage contrôle l'affichage des variantes de vos produits lors du chargement de la page ou la sélection des variantes par défaut.

Variante par défaut : cabillot Oui afficher une option présélectionnée (par exemple, « Vert / Adulte ») lors du premier chargement de la page produit.

Pour personnaliser l'option par défaut, vous devez modifier la source du produit dans l'élément de produit en « Choisir manuellement"Au lieu de"Attribué ». Apprendre encore plus.

Aligner

Le Aligner Cette section vous permet de contrôler le positionnement de vos options de variante dans leur conteneur, ce qui vous aide à peaufiner la mise en page générale. Vous pouvez choisir parmi trois options : Aligné à gauche, au centre ou à droite, selon votre préférence.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Avancé onglet et suivez les instructions dans cet article.

Dépannage des problèmes de variantes de couleurs

Si l'un de vos échantillons de couleurs ne fonctionne pas correctement dans GemPages, voici quelques étapes pour dépanner et résoudre le problème :

Configuration des variantes dans Shopify

Assurez-vous que vos variantes de produits sont correctement configurées dans Shopify :

• Statut actif: Vérifiez que le produit et ses variantes sont actifs et disponibles sur votre boutique en ligne.
• Canaux de vente: Confirmez que le canal de vente « Boutique en ligne » est sélectionné pour le produit.
• Configuration des variantes:Vérifiez que chaque variante possède une combinaison unique d’options, telles que la couleur et la taille.

Examiner les paramètres du module produit

• Dans l'éditeur GemPages, cliquez sur le bouton Module produit.
• 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). Sélectionner un produit section, assurez-vous que le bon produit est attribué.

Questions Fréquentes

1. Puis-je afficher chaque variante de produit sur une page de produit distincte ?

Shopify ne prend pas en charge l'affichage des variantes sous forme de pages de produits distinctes par défaut.

Cependant, une solution de contournement courante consiste à créer des produits distincts pour chaque variante, puis les lier manuellement ensemble en tant que « groupe de variantes » à l'aide de métachamps ou d'une section personnalisée.

2. Quelle est la différence entre les variantes et les produits séparés ?

Les variantes partagent la même page produit et utilisent des échantillons/listes déroulantes pour basculer entre les options (par exemple, tailles, couleurs).

Chaque produit possède sa propre page produit et son propre URL. Cette option est souvent utilisée lorsque chaque variante présente des photos, des prix ou des descriptions très différents.

3. Comment puis-je lier des pages de produits distinctes ensemble comme des variantes ?

Vous pouvez utiliser:

• Liens manuels dans les descriptions de produits ou les blocs personnalisés (par exemple, « Également disponible en… »)
• Applications de recommandation de produits
• Sections ou métachamps Liquid personnalisés (nécessite quelques connaissances de Shopify)

4. Comment activer le zoom lorsque je survole l'image d'une variante ?

Le zoom est contrôlé dans le Élément d'images de produits, pas dans les échantillons de variantes.
Pour l'activer:

• Cliquez sur Images du produit élément dans l'éditeur.
• Sous Image mise en avant > Action au survol, choisissez Zoom.
• Ajustez le type et la valeur du zoom selon vos besoins.

5. Pourquoi le zoom ne se déclenche-t-il pas lorsque je survole un échantillon de variante ?

Échantillons de variantes uniquement modifier l'image du produit sélectionné, ils ne contrôlent pas le comportement du zoom.
Pour activer l'effet de zoom, configurez-le dans Images du produit > Action de survol, pas dans les paramètres de l'élément échantillon.

6. Comment modifier le prix des variantes de produits dans Shopify ?

Vous pouvez mettre à jour les prix des variantes directement dans votre interface d'administration Shopify. Accédez à Produits, sélectionnez le produit avec ses variantes, puis dans le Variantes mettre à jour la section Prix champ pour la variante et cliquez EnregistrerLe nouveau prix apparaîtra automatiquement sur la page de votre produit, y compris sur les pages créées avec GemPages.