9 façons de créer des pages de produits Shopify à forte conversion

Pour les propriétaires de magasins de commerce électronique, votre page produit mérite beaucoup d'attention. Il y a tellement d'éléments à prendre en compte, mais aussi de nombreuses opportunités pour créer une expérience d'achat exceptionnelle pour vos clients.

Dans cet article, nous allons examiner certains des domaines sur lesquels vous pouvez vous concentrer pour vraiment optimiser vos pages de produits de commerce électronique pour des conversions plus élevées, une meilleure expérience d'achat et transformer vos navigateurs en acheteurs.

1. Cartographiez les éléments de votre page produit

La première étape de la conception d'une page de commerce électronique optimisée pour les conversions consiste à intégrer les éléments couramment utilisés dans les pages de commerce électronique à succès.

En prenant l'exemple d'un magasin populaire comme Asos, nous pouvons identifier certains des facteurs importants qui ont bien fonctionné sur leur page produit.

Avec des pages de produits ayant un impact si important sur les conversions, vous pouvez être sûr qu'Asos consacrera des ressources pour tester et optimiser chaque composant.

Cette attention aux détails est évidente si nous regardons comment une page de produit typique se charge au ralenti - plafonnée à 250kb/s (ou une connexion 3g régulière). L'ordre de chargement de chaque composant nous donne une indication de l'importance de chaque composant.

L'ordre de chargement des éléments va :

• Navigation et logo . L'utilisateur doit toujours savoir où il se trouve et avoir un moyen de naviguer rapidement vers d'autres pages.
• Vignettes des produits. Les images indiquent que l'utilisateur est sur la bonne page et lui donnent un aperçu de la page avant qu'elle ne soit complètement chargée.
• Titre du produit et fil d'Ariane. De plus, confirmez le choix de l'utilisateur et donnez-lui une option rapide pour revenir à une catégorie similaire
• Image principale du produit . La photo du produit est ce que le client recherche. Notez que ceux-ci se chargent même avant l'appel à l'action, bien que les images aient généralement une taille de fichier plus grande.
• Appel à l'action . Le bouton ajouter au panier
• Informations supplémentaires . Les autres informations sur le produit qui se trouvent sous le pli sont chargées en dernier.

Décomposons plus en détail certains des composants de la page produit Asos.

2. Mettez en surbrillance les photos des produits devant et au centre

Asos est un site riche en contenu qui utilise la photographie de différentes manières. Lorsque vous êtes sur la page d'accueil, vous ne verrez pas de photos liées à des produits spécifiques, mais plutôt à des collections.

Mais lorsqu'un client clique sur un produit, c'est une autre histoire. La première chose qu'ils voient est une image de produit à l'avant-plan. Le peu de contenu qui reste au-dessus du pli est tout aligné autour de cette galerie de photos principale.

Nous parlerons davantage de l'importance de la variété des différentes photos qu'Asos utilise, mais le positionnement et la proéminence sont ce qui est important maintenant. Les photos de produits aident les clients à discerner immédiatement les détails d'un produit plus rapidement que n'importe quelle description et les aident à trouver le produit qu'ils recherchent plus rapidement. Ils doivent être placés bien en vue et chargés rapidement.

3. Affichez clairement les informations d'expédition

Asos propose non seulement une bannière de livraison et de retour gratuite, mais également un lien vers les détails de la livraison gratuite dans le monde entier à côté du prix. Ces types de promotions de commerce électronique peuvent influencer considérablement les décisions d'achat.

Les frais de livraison élevés sont considérés comme la principale raison pour laquelle les consommateurs abandonnent leur panier, et 93 % des consommateurs déclarent qu'ils achèteraient plus de produits si la livraison gratuite était disponible. Sachant cela, Asos met tout en œuvre pour promouvoir son offre de livraison gratuite.

4. Inclure des détails supplémentaires

Bien que la page du produit Asos puisse contenir des informations rares au-dessus du pli, une mine d'informations supplémentaires sur le produit est facilement disponible pour le client qui souhaite en savoir plus.

Étant donné que les clients ne peuvent pas physiquement essayer le produit ou poser des questions à un vendeur, vous devez faire tout votre possible pour les éduquer et apporter des réponses aux questions qu'ils peuvent se poser.

Quel genre de détails devriez-vous inclure?

Ces informations peuvent inclure des détails tels que :

• La matière du produit
• Le style
• Caractéristiques de conception importantes
• Instructions d'entretien et de maintenance
• Informations sur la marque ou le fabricant
• Méta-informations telles que les SKU qui peuvent aider le client à effectuer des recherches supplémentaires ou à vous contacter.

Pour les marques de mode, ces détails supplémentaires peuvent être particulièrement importants. Asos inclut également les mesures du modèle et la taille qu'il porte afin que le client puisse évaluer plus précisément comment ce produit lui conviendra.

Pourquoi ces informations supplémentaires sont-elles si importantes ?

D'une part, avoir des descriptions de produits uniques peut être un excellent moyen d'augmenter le trafic de votre moteur de recherche organique. Mais ils devraient également aider à répondre à la question de savoir pourquoi un client devrait choisir vos produits ou stocker plutôt qu'un produit concurrent. Fournir ces détails supplémentaires montre que vous avez un plus grand niveau d'expertise sur le produit que de simplement énumérer les détails de base discernables à partir d'une photo du produit.

Plus d'informations signifie également qu'un client peut faire un choix éclairé de manière indépendante, et ce n'est pas seulement bon pour lui. Aider le client à effectuer un achat en lequel il a confiance peut contribuer à réduire le support client et à réduire le nombre de retours.

5. Présentez un appel à l'action clair

Une autre fonctionnalité de conception du site Web d'Asos est l'appel à l'action clair disponible sur les pages de produits.

Il n'y a pas de processus de commande compliqué impliqué. En fait, toutes les informations dont le client a besoin sont transmises dans les photos, le titre et la description du produit. Le client doit simplement sélectionner sa taille et cliquer sur le bouton bien visible Ajouter au panier. Ce faisant, ils sont accueillis par une fenêtre contextuelle discrète qui confirme leur sélection. Cette fenêtre contextuelle leur permet soit de terminer leur paiement plus rapidement, soit de continuer leurs achats, avant de disparaître après quelques secondes.

De nombreux magasins optent pour une forme d'avis ou l'autre, soit en les redirigeant vers le panier, soit en affichant un panier contextuel dès qu'un article a été ajouté, soit, alternativement, en ne prenant aucune option et en laissant au client le soin de accédez à la caisse. Cette approche semble être un bon compromis.

Si le client n'est pas prêt à acheter, Asos a également inclus un moyen simple pour les clients de mettre l'article en favori. La plupart des magasins ont maintenant une sorte de fonction de liste de souhaits, mais ce qui est génial avec l'exécution d'Asos, c'est le fait que l'utilisateur n'a pas besoin de créer un compte pour que l'article soit toujours enregistré pendant 60 jours dans le cache de son navigateur.

Cependant, cliquer sur le bouton renvoie toujours une demande à Asos, afin qu'ils connaissent des détails tels que le type d'utilisateur qui enregistre l'élément, quel élément est enregistré et quand il a été enregistré - toutes les informations fantastiques qu'ils peuvent utiliser pour recibler le client sur les réseaux sociaux.

6. Utilisez un fond blanc sur vos images de produits

Chez Pixc, plus de 90 % de nos clients choisissent de faire retoucher leurs photos pour supprimer l'arrière-plan de leurs images et le remplacer par du blanc. Et il n'y a pas que nous. Avoir un arrière-plan blanc (ou du moins cohérent) pour toutes vos images de produits est devenu la norme pour toute boutique de commerce électronique réussie.

Alors pourquoi est-ce si important ?

Cela vous fait économiser de l'argent

Garder un arrière-plan cohérent accélère le processus d'introduction de nouveaux produits, de photographie et d'édition. Des magasins comme Asos peuvent se permettre d'avoir un studio, un photographe et un éditeur à portée de main pour assurer une mise en page et un éclairage cohérents de leurs produits, mais même pour les grands magasins de commerce électronique, l'utilisation d'un fond blanc peut faire gagner beaucoup de temps.

Au lieu d'avoir une équipe interne, vous pouvez simplement photographier vos produits et les modifier pour plus de cohérence. Ou mieux encore, envoyez-les à un service comme Pixc pour automatiser encore plus votre processus.

Il met mieux en valeur votre produit

Sans arrière-plan, il n'y a aucune distraction à retirer du produit lui-même. Un fond blanc vous permet de mieux mettre en valeur les détails les plus fins du produit et des caractéristiques spécifiques qui pourraient autrement passer inaperçues.

Il aide les clients à parcourir vos produits

Lorsque les photos de produits sont toutes similaires, un client peut facilement parcourir les pages de votre collection et choisir le produit qu'il recherche.

7. Incorporez un bon mélange de photographie

Augmentez le nombre de photos que vous affichez

La photographie de votre produit étant si importante, il est important d'inclure une variété de photos différentes de votre produit. Une photo supplémentaire peut transmettre plus d'informations que n'importe quelle description.

Seuls 0,52 % des consommateurs souhaitent voir une seule photo, tandis que 33,16 % préfèrent voir plusieurs photos et 58,03 % souhaitent voir des photos de produits montrant le produit à 360 degrés.

Cela signifie que vous devez inclure un mélange de photos de produits pour présenter chaque angle du produit et utiliser une variété de photographies pour souligner les points clés du produit. Par exemple, pour des produits comme les chaussures, utilisez des gros plans de la semelle et des coutures pour transmettre les principaux arguments de vente du produit.

Envisagez des prises de vue en contexte

Des photos contextuelles montrant votre produit en action peuvent aider à stimuler l'imagination du client. Cela leur donne également l'occasion de voir à quoi cela ressemble en dehors d'une salle d'exposition.

8. Optimisez vos métadonnées d'image

Trop de magasins de commerce électronique sont déçus par leurs images de produits. Alors que des plates-formes telles que Shopify et BigCommerce contribuent à apporter une compression et un rapport d'aspect appropriés aux masses, il existe quelques autres bonnes habitudes que vous devez toujours conserver.

Inclure les méta-informations appropriées

Des métadonnées appropriées se résument à trois choses. Assurez-vous que vos images ont :

1. Corriger les balises ALT qui décrivent précisément l'image
2. Balises de titre appropriées
3. Un nom de fichier pertinent utilisant des traits d'union (par exemple my-image.jpg)

Les méta-informations sont importantes pour l'accessibilité, de sorte que le bourrage de mots-clés est mal vu (et également inefficace). Mais cela donne un contexte à Google, qui utilisera les métadonnées de l'image, ainsi que le contenu qui l'entoure, pour aider à comprendre le contenu de la page.

Assurez-vous que vos images sont d'une taille appropriée

Assurez-vous qu'ils ont la même hauteur et la même largeur. De manière générale, les images carrées s'afficheront mieux sur tous les appareils. L'utilisation d'images rectangulaires peut également sembler gênante si vous avez des produits particulièrement longs ou larges.

Assurez-vous qu'ils sont suffisamment grands pour activer le zoom. Selon la conception de votre site de commerce électronique, votre site utilisera des versions de tailles différentes de la même image pour les vignettes, les images de collection, les images de produits et la fonctionnalité de zoom. Vous voulez vous assurer que vos images sont suffisamment grandes pour permettre à cette fonction de zoom de fonctionner sans être inutilement grandes. Les images entre 1 000 pixels et 1 600 pixels sont généralement de bonne taille.

9. Créez votre propre modèle de photographie de produit

Avec les conseils ci-dessus à l'esprit, l'un des moyens les plus simples de garantir la cohérence des images de vos produits consiste à utiliser un modèle. Un modèle vous permet d'aligner correctement vos photos à plusieurs reprises et de garantir que la mise en page et les dimensions restent les mêmes.

Réaliser cela dans Photoshop est relativement simple.

• Créez un nouveau fichier dans Photoshop. Assurez-vous que votre mode de couleur est défini sur Couleur RVB - 8 bits, que la résolution est d'au moins 72 pixels/pouce et que le contenu de l'arrière-plan est blanc ou transparent.

• Créez un nouveau repère. Sélectionnez « Nouveau guide » dans le menu « Affichage ».

• Créez vos guides de marge. Créez un guide 10 % vertical, 90 % vertical, 10 % horizontal et 90 % horizontal. Vous pouvez également définir vos propres marges.

• Créez vos guides de centrage. Créez un guide 50 % vertical et 50 % horizontal.

Tu devrais finir avec ça.

Une fois que vous avez terminé, enregistrez votre fichier de modèle en tant que document Photoshop typique. Vos guides resteront à votre disposition la prochaine fois que vous ouvrirez le document.

Avoir un modèle vous permet de placer toutes vos images de produits exactement au même endroit. Il garantit également que vos images sont toutes correctement mises à l'échelle et qu'elles sont enregistrées avec des dimensions cohérentes.

Dans ce guide, nous avons examiné les éléments qui contribueront à une page produit bien conçue et certaines des mesures que vous pouvez prendre aujourd'hui pour améliorer l'expérience d'achat de vos clients.

Grâce aux conseils de ce guide, vous disposez désormais de suggestions concrètes que vous pouvez mettre en œuvre pour commencer à améliorer votre page produit. À vous maintenant d'appliquer ces conseils à votre propre boutique e-commerce pour commencer à booster vos ventes !