Esquisses basées sur du texte

Si une image n’est pas disponible pour un échantillon, la valeur d’attribut apparaît sous forme de texte. Un échantillon de texte est semblable à un bouton avec un libellé de texte et se comporte de la même manière qu’un échantillon avec une image. Lorsque des échantillons basés sur du texte sont utilisés pour afficher les tailles disponibles, toute taille qui n’est pas disponible est dépassée.

La sélection d’échantillons basés sur du texte affiche la taille en rupture de stock

Nuancier dans la navigation par couches

Les nuanciers peuvent également être utilisés dans la navigation par couches, si la propriété Use in Layered Navigation ​de l’attribut color est définie sur Yes. L’exemple suivant montre des échantillons d’images basés sur du texte et des couleurs dans la navigation par couches.

Nuancier affiché dans la navigation par couches

Création d’échantillons pour les produits

Les échantillons peuvent être définis en tant que composant de l’attribut color ou configurés localement pour un produit spécifique et téléchargés en tant que images de produit.

Dans les exemples précédents, les pantalons "Sylvia Capri" sont disponibles dans des valeurs spécifiques de red, green et blue. Puisque les échantillons ont été pris de l’image du produit, chaque échantillon est une vraie représentation de la couleur. L’attribut color est utilisé pour gérer les informations pour toutes les couleurs et tous les échantillons de produits.

Étape 1 : création des échantillons

Utilisez l’une des méthodes suivantes pour créer des échantillons pour vos produits.

Méthode 1 : ajout d’un échantillon de couleur

  1. Pour capturer la véritable couleur d’un produit, ouvrez l’image dans un éditeur de photos et utilisez l’outil de chute d’oeil pour identifier la couleur exacte et prendre note de la valeur hexadécimale équivalente.

    Valeurs de couleur hexadécimales

  2. Sur la barre latérale Admin, accédez à Stores > Attributes>Product.

  3. Dans la grille, ouvrez l’attribut color en mode d’édition.

  4. Vérifiez que Catalog Input Type for Store Owner est défini sur Visual Swatch.

  5. Si vous préférez ne pas afficher les images de produit simples correspondantes lorsque l’échantillon est sélectionné sur la page d’affichage du produit, définissez Update Product Preview Image sur No.

  6. Sous Manage Swatch (Values of Your Attribute), cliquez sur Add Swatch ​et procédez comme suit :

    Gérer les valeurs d’échantillon

    • Dans la colonne Échantillon, cliquez sur le nouvel échantillon et sélectionnez Choose a color dans le menu.

      Choisir une couleur d’échantillon

    • Dans le sélecteur de couleurs, placez le curseur dans le champ # , supprimez la valeur actuelle et saisissez la valeur hexadécimale de six caractères de la nouvelle couleur.

      Entrez la valeur hexadécimale

    • Pour enregistrer l’échantillon, cliquez sur l’icône Color Wheel ( Icône Color ) dans le coin inférieur droit du sélecteur de couleurs.

    • Dans la colonne Admin , saisissez un libellé pour décrire la couleur à l’administrateur du magasin.

      Vous pouvez également saisir la traduction de la couleur pour chaque langue prise en charge. Dans l’exemple suivant, le SKU est inclus à titre de référence dans l’étiquette Admin, car les couleurs ne sont utilisées que pour un produit spécifique. Vous pouvez inclure un espace ou un trait de soulignement dans le libellé, mais pas un trait d’union.

    • Dans la colonne Is Default , sélectionnez l’échantillon à utiliser par défaut.

    • Pour modifier l’ordre des échantillons de couleurs, cliquez sur l’icône Order Icône Ordre de tri et faites glisser l’élément vers un nouvel emplacement dans la liste.

      Étiquettes Swatch

  7. Une fois l’opération terminée, cliquez sur Save Attribute et actualisez le cache lorsque vous y êtes invité.

  8. Ouvrez chaque produit en mode d’édition et mettez à jour l’attribut Color avec l’échantillon approprié.

    Pour mettre à jour plusieurs produits en même temps, procédez comme suit.

Méthode 2 : téléchargement d’une image d’échantillon

  1. Pour capturer une image pour un échantillon, ouvrez l’image du produit dans un éditeur de photos et enregistrez une zone carrée de l’image qui représente la couleur, le motif ou la texture.

    Si nécessaire, vous pouvez répéter cette action pour chaque variante du produit.

    La taille et les dimensions de l’échantillon sont déterminées par le thème. En règle générale, l’enregistrement d’une image en tant que carré permet de conserver les proportions d’un modèle.

    Images d’échantillon

  2. Sur la barre latérale Admin, accédez à Stores > Attributes>Product.

  3. Dans la grille, ouvrez l’attribut color en mode d’édition.

  4. Vérifiez que Catalog Input Type for Store Owner est défini sur Visual Swatch.

  5. Si vous préférez ne pas afficher les images de produit simples correspondantes lorsque l’échantillon est sélectionné sur la page d’affichage du produit, définissez Update Product Preview Image sur No.

  6. Sous Manage Swatch(valeurs de votre attribut), cliquez sur Add Swatch ​et procédez comme suit :

    • Dans la colonne Swatch, cliquez sur le nouvel échantillon pour afficher le menu et choisissez Upload a file.

    • Accédez au fichier d’échantillon que vous avez préparé et sélectionnez le fichier à charger.

    • Répétez ces étapes pour chaque échantillon d’image.

    • Saisissez les libellés pour l’administrateur et le storefront.

      Dans cet exemple, le SKU est inclus dans l’étiquette d’administration à titre de référence, car ces couleurs ne sont utilisées que pour un produit spécifique. Vous pouvez inclure un espace ou un trait de soulignement dans le libellé, mais pas de trait d’union.

      Entrer les étiquettes

  7. Une fois l’opération terminée, cliquez sur Save Attribute et actualisez le cache lorsque vous y êtes invité.

  8. Ouvrez chaque produit en mode d’édition et mettez à jour l’attribut Color avec l’échantillon approprié.

    Pour mettre à jour plusieurs produits en même temps, procédez comme suit.