Comment les images peuvent booster les ventes dans votre boutique Magento 2

Les images dans le commerce électronique ne sont pas toutes puissantes, mais toujours indispensables.

Ils attirent l'attention des clients et façonnent leurs comportements décisionnels.

Si l'on considère que 92 % des consommateurs affirment que les visuels sont le principal facteur influent sur une décision d'achat, les acheteurs peuvent être très sensibles à l'apparence d'un produit dans différentes variations, sous différents angles.

Apprenons-en plus sur l'optimisation des images Magento et comment en faire un coup de cœur instantané en utilisant des échantillons d'image, de couleur et de texte dans Magento 2.

Que sont les échantillons et leurs types de base ?

Les échantillons sont la fonctionnalité qui permet de présenter les options du produit en affichant la représentation visuelle correspondante lorsqu'elle est sélectionnée.

Les trois types d'échantillons sont les suivants :

Nuancier

Il permet aux marchands d'afficher des options de produits telles que la couleur/la texture/les motifs. Les options indisponibles sont barrées lorsqu'elles sont en rupture de stock.

Échantillon d'image (alias Échantillon visuel)

Il amène la présentation des produits à un tout autre niveau et permet de montrer les variations de produits aussi proches que possible de leur apparence réelle.

Échantillon de texte

Lorsqu'il n'y a pas d'images de produits Magento particulières à afficher, vous pouvez utiliser des "boutons" avec des valeurs de texte pour les attributs de produit. Cette nuance fonctionne exactement de la même manière que la couleur.

Comment pouvez-vous étendre la fonctionnalité par défaut de Magento 2 ?

Magento 2, par défaut, permet aux utilisateurs de configurer des échantillons uniquement pour les produits configurables :

• sur la page produit
• dans les listes de produits, et
• navigation en couches.

Le sélecteur d'image de produit configurable de Magento comprend des nuances visuelles et textuelles, ainsi qu'un contrôle d'entrée déroulant.

Veuillez consulter cet article pour savoir comment utiliser la fonctionnalité par défaut de Magento 2 pour configurer les nuances.

L'extension Advanced Product Options étend considérablement les possibilités par défaut. Il permet d'ajouter des échantillons d'image, de texte et de couleur pour tout type de produit*, présentant ainsi toute variante de produit au mieux.

Apprenons à configurer l'extension afin de :

• Ajouter un échantillon d'image
• Ajouter un échantillon de texte
• Remplacer les images standard du produit par celle d'une option
• Utiliser plusieurs images pour une seule option
• Afficher les images des options dans l'info-bulle d'aperçu
• Créer un effet de superposition d'image

Exemple 1. Échantillons de texte et d'image. Aperçu de l'info-bulle.

Dans l'exemple suivant, nous allons vous montrer comment mettre en œuvre des actions telles que

• ajouter des échantillons de texte et d'image
• affichage des images d'options dans l'info-bulle d'aperçu

Apprenons à configurer un produit simple.

En réalité:

Avec l'extension, il n'est plus nécessaire de créer des produits configurables pour proposer des variantes de produits.

Le résultat suivant que vous obtiendrez sur le frontend :

Pour accéder à la fonctionnalité et paramétrer les swatches des options produit dans votre boutique Magento 2,

allez dans Produits – Inventaire – Catalogue.

Alors,

sélectionnez un produit auquel vous souhaitez ajouter des nuances.

Les configurations de base sont stockées sous l'onglet Options personnalisables .

Voici à quoi ressemblent les configurations de l'exemple ci-dessus depuis le backend :

Comme tu peux le voir:

Le menu déroulant a été choisi comme type d'option.

Cependant, pour que les variantes ressemblent à des nuances de texte normales, vous devez cocher la case Is Swatch .

En outre:

Vous pouvez utiliser des images comme info-bulle pour vos options.

Pour ce faire, téléchargez les images correspondantes pour chaque option séparément (c'est là que vous pouvez télécharger plusieurs images pour afficher vos offres dans leur intégralité) et choisissez la valeur de l' info -bulle après la ou les images qui ont été téléchargées.

Pour faire ça:

Cliquez sur l'image de l'option et sélectionnez l'une des options disponibles, qui est l'info- bulle dans notre cas.

Afin de créer des nuances d'image, vous devrez sélectionner Base lors de la configuration des rôles d'image.

Quant à notre exemple :

Les images pour le type de SSD sont affichées à la fois sous forme de base et d'info- bulle lorsque vous passez la souris dessus.

Comme tu peux le voir:

La logique de configuration est claire et simple.

Exemple 2. Remplacement d'une image de produit standard par une image en option

Prenons un autre exemple.

Ici:

L'image standard du produit est remplacée par celle d'une variante de produit :

Les configurations de base se trouvent dans l'onglet Options personnalisables .

Ici:

Assurez-vous que Mode Image est défini sur Remplacer ' . Remplacer l'image de la galerie principale doit être sélectionné dans les rôles d'image.

Exemple 3 : superposition d'images

Vous pouvez également profiter de la possibilité de créer un effet de superposition pour vos images de produits.

Ainsi, l'image optionnelle couvrira l'image principale du produit.

Les configurations de base se trouvent dans l'onglet Options personnalisables .

Ici:

Passez à l'option Galerie d'images Magento que vous venez de télécharger, puis cliquez sur celle que vous souhaitez utiliser comme superposition.

Dans la fenêtre Détails de l'image , sélectionnez l'option requise.

Le mode Galerie d'options et ses avantages

Le mode Galerie d'options régule la manière dont les images sont affichées dans les options du produit. Cela vous donne l'avantage d'afficher les produits de la manière qui convient le mieux à votre public cible.

Lorsqu'il est désactivé, aucune image ne sera affichée naturellement.

Examinons de plus près les options d'affichage disponibles :

À côté de l'option

Lorsque ce mode d'affichage de la galerie est sélectionné, les images s'affichent sous forme de vignettes à proximité/sous les options du produit :

Une fois sélectionné

Cette option masque toutes les images des variantes du produit et permet de les afficher juste après leur sélection :

Les configurations sont masquées dans l' onglet Options personnalisables .

Voilà à quoi ils ressemblent dans le backend :

Emballer

Il est souvent insuffisant d'afficher les couleurs pures pour les variations de produits car leur aspect peut être plus complexe, composite et unique pour une option spécifique.

La façon dont vous affichez vos offres en ligne est positivement associée au niveau de revenus et peut vous coûter des clients.

*Notez que Magento n'autorise pas les options personnalisées pour les produits groupés.

Besoin d'aide avec des échantillons de produits ? N'hésitez pas à laisser un commentaire ci-dessous, nous serons ravis de vous aider !