Une fois installée et configurée, l’application Color Swatches permettra aux utilisateurs de votre site de sélectionner la couleur d’un produit en fonction des images représentatives que vous avez chargées. Ainsi, si vous avez un produit avec des options de couleur comme rouge, bleu ou imprimé léopard, vous pouvez télécharger des images (ou définir une couleur unie) pour chaque produit, montrant au client un échantillon de cette couleur/motif sur la page des détails du produit. Lorsqu’on clique sur un échantillon, l’option de couleur est mise à jour et eCom exécute la fonctionnalité standard qui s’applique normalement à la sélection de couleur (c.-à-d. le prix, le stock, la mise à jour de la galerie des images du produit).

Suivez les instructions sur Lightspeed eCom pour acheter l’application Color Swatches sur l’App Marketplace. Pendant l’installation, vous serez redirigé vers notre site de gestion des applications pour vous connecter à un compte existant (si vous avez déjà acheté une application Lightspeed eCom chez nous) OU pour créer un nouveau compte chez nous, vous permettant d’installer et de gérer cette application et toutes les futures applications que vous pourriez acheter chez nous pour Lightspeed eCom.

Une fois que vous avez créé un compte ou que vous vous êtes connecté à votre compte existant, l’application s’installe automatiquement, après quoi vous serez redirigé vers la liste des boutiques Lightspeed eCom enregistrées avec votre compte et toutes les applications installées avec ces boutiques.

Pour que l’application Color Swatches fonctionne, l’application Catalog Clone est installée en même temps. L’application Catalog Clone est nécessaire pour copier votre catalogue eCom (et rester en synchronisation avec celui-ci) dans le cadre de notre application (afin que votre catalogue soit disponible pour l’application Color Swatches dans l’administrateur de l’application). Avant de commencer à travailler dans l’application Color Swatches, vous devrez effectuer la synchronisation initiale dans l’application Catalog Clone pour extraire votre catalogue actuel de produits dans votre compte AdVision. Pour ce faire, cliquez sur le lien « Catalogue Clone » (Cloner catalogue), puis sur le bouton « Import/Full Sync Catalog » (Importer/Catalogue synchronisé complet). Assurez-vous de laisser ouverte la fenêtre de votre navigateur et votre ordinateur allumé durant l’importation.

Une fois que vous avez importé votre catalogue dans votre compte AdVision, vous pouvez commencer à travailler dans l’application Color Swatch.

Regardez notre tutoriel vidéo !

Pour gérer cette application, cliquez sur son nom (Color Swatches) dans la boutique adéquate. Vous verrez alors la liste des produits montrant tous les produits que l’application Catalog Clone a importés d’eCom.

Tous les produits de votre catalogue s’afficheront et avec chaque produit, vous verrez les informations suivantes :

1. ID - dans le système de l’application AdVision
2. ID eCom - l’ID du produit dans eCom
3. Titre
4. URL - chemin vers le produit dans votre boutique eCom en ligne
5. Visibilité - si le produit est prêt ou non à être affiché dans votre boutique eCom en ligne 
6. Has Swatches (Echantillons disponibles) - indique si vous avez déjà téléchargé des échantillons pour le produit dans l’application.

Nous pouvons à présent commencer à installer les échantillons. Tout d’abord, trouvez dans votre catalogue un produit qui a une option de couleur. Vous pouvez le faire soit en parcourant la liste des produits, soit en utilisant la recherche par mot-clé en haut de la page. Une fois trouvé le produit sur lequel vous désirez travailler, cliquez sur son nom afin de gérer ses échantillons.

Si le produit que vous avez sélectionné a des variantes (par exemple Couleur, Taille) configurées dans eCom, elle seront reprises sur la page qui se charge. Pour chaque variante, vous verrez son nom (par exemple Couleur), sous lequel seront reprises toutes les options de la variante en question. Par exemple, les options de variante pour Couleur peuvent être Rouge, Bleu et Vert ; pour chaque option de variante, une vignette s’affiche indiquant :

1. Une boîte qui montrera l’image ou la nuance de couleur de l’option, une fois que vous l’avez définie
2. Le titre de l’option (p. ex. Bleu)
3. Un champ de légende par défaut, que vous pouvez paramétrer afin de déterminer les attributs ALT et TITLE de l’image de l’option. Si vous le laissez vierge, le titre de l’option (p. ex. Bleu) sera utilisé pour ALT et TITLE. Vous n’êtes pas familier avec ALT et TITLE ? Veuillez lire https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/
4. Sous le champ de légende par défaut se trouvent deux icônes, l’icône d’image et celle de palette de couleurs. L’icône d’image (à gauche) permet de télécharger une image pour l’échantillon de l’option. L’icône de la palette de couleurs (à droite) vous sert à définir une couleur unie pour l’échantillon de l’option plutôt que d’utiliser une image.

Sélectionner une couleur d’échantillon

Si une couleur unie est suffisante pour l’échantillon d’une option, vous pouvez utiliser le sélecteur de couleurs pour trouver et utiliser une simple couleur unie afin de représenter l’option. L’utilisation d’une couleur unie permet à vos clients de charger l’échantillon plus rapidement (les couleurs unies se chargent plus vite que les images) et vous permet d’éviter de préparer une image. Pour utiliser le sélecteur de couleurs, cliquez sur l’icône de la palette de couleurs sous l’option avec laquelle vous voulez travailler, utilisez l’outil de sélection de couleurs afin de trouver et de sélectionner votre couleur et cliquez ensuite sur le bouton « Choose » (Choisir). Ceci définira la couleur des options et affichera la couleur dans l’aperçu des options.

Télécharger une image pour l’échantillon

Si vous avez besoin de quelque chose de plus détaillé qu’un affichage dans une couleur pour l’échantillon, vous pouvez préparer et télécharger une image à utiliser. Avant de télécharger l’image, vous devez tout d’abord la préparer.

En haut de la page, vous verrez le message suivant « Please remember to optimize your images before upload » (« N’oubliez pas d’optimiser vos images avant de les télécharger »). Voici les exigences requises pour l’image d’un échantillon. Chaque image d’un échantillon que vous désirez utiliser doit :

1. Avoir une largeur maximale de 150 pixels
2. Avoir 72 dpi
3. Être optimisée pour le Web. Si vous n’êtes pas familier avec l’optimisation d’images pour le Web, veuillez consulter la page https://www.abetterlemonadestand.com/optimizing-images-for-web/ Si vous n’optimisez pas une image avant le téléchargement, l’image risque de ne pas être téléchargée dans l’application, ce qui ralentira les temps de chargement pour vos clients lors du chargement des images des échantillons.
4. La hauteur de l’image est libre, mais elle doit être uniforme pour toutes les images des échantillons.
   

Une fois que vous avez préparé vos images d’échantillons, cliquez sur l’icône de l’image sous l’option pour laquelle vous voulez télécharger une image. Ceci permettra la création de la boîte de dialogue de sélection du fichier dans votre système d’exploitation afin que vous puissiez trouver le fichier que vous avez préparé et que vous désirez utiliser. Après avoir trouvé le fichier, sélectionnez-le (cliquez ou double cliquez sur celui-ci et cliquez ensuite sur « Open » (Ouvrir) ou « Select » (Sélectionner)). L’image se chargera immédiatement pour l’échantillon et vous verrez une vignette de l’image sous le nom de l’option.

Lorsque vous avez terminé de configurer tous les échantillons pour un produit, visitez la page du produit dans votre boutique eCom en ligne. Par défaut, tous les échantillons que vous avez configurés s’afficheront sous le menu de sélection de la variante. Notez que si vous ne définissez pas un échantillon de couleur ou d’image pour toutes les options d’une variante, les noms de toutes les options qui ont été négligées s’afficheront au lieu d’un échantillon de couleur ou d’image. Pour résoudre cela, assurez-vous de bien définir un échantillon d’image ou de couleur pour toutes les options d’une variante pour laquelle vous utiliserez des échantillons.

Maintenant que vous avez vu comment définir les échantillons d’un produit, cliquez sur l’onglet Settings (Paramètres) pour voir les champs que vous pouvez ajuster. Sous Paramètres, vous pouvez contrôler les éléments suivants :

1. Largeur des échantillons - Ceci déterminera la largeur des échantillons de couleurs et d’images sur la page d’un produit. Vous pouvez indiquer une valeur en pixels (par ex. 50px - c’est la méthode recommandée), un pourcentage (par ex. 80 %), une valeur en em (par ex. 3em) ou une valeur en pt (par ex. 48 pt). Que faut-il savoir sur ces unités de dimensionnement ? Lisez https://www.w3.org/Style/Examples/007/units.en.html. La largeur par défaut est de 30px.
2. Hauteur de l’échantillon d’image - Déterminez la hauteur d’affichage des échantillons d’image sur les pages des produits. La hauteur par défaut des échantillons d’images est 30.
3. Hauteur de l’échantillon de couleurs - Déterminez la hauteur d’affichage des échantillons de couleur sur les pages des produits. La hauteur d’échantillon de couleur par défaut est 30.
4. Séparation du tableau - Uniquement pour les utilisateurs avancés. Dans certaines circonstances, AdVision fournira des recommandations.
   

Si vous apportez des modifications à n’importe lequel de ces champs, n’oubliez pas de cliquer sur « Save Settings » (Enregistrer les paramètres) pour enregistrer ces modifications.

Go to Top