Créer un catalogue de produits interactif

Aidez les visiteurs à examiner les caractéristiques, choisir les variantes et comparer les options avant de décider.

Un fabricant de linge de lit prépare une nouvelle parure. Les clients demandent si elle convient à un matelas épais, comment les couleurs se distinguent et ce qui change entre les tailles Queen et King. Une photo et un prix ne répondent à aucune de ces trois questions.

Un catalogue interactif est utile lorsque les visiteurs doivent examiner un article et faire des choix avant de vous contacter ou d'envoyer une demande. Même un catalogue limité à un produit peut rendre service en montrant les conséquences d'une sélection : la photo, les dimensions et le prix associés à la variante choisie.

En bref

Listez les variantes, les photographies, les dimensions et les prix d'exemple. Demandez des sélecteurs qui actualisent le produit affiché et son récapitulatif. Essayez de changer la taille et la quantité, puis examinez le panier de démonstration. Vérifiez chaque variante dans vos documents de référence avant de partager l'application.

Partir des choix du visiteur

Listez les variantes et leurs caractéristiques avant de demander l'application. Distinguez les prix affichés de toute promesse de paiement ou de disponibilité. Pour un premier brouillon, utilisez des valeurs d'exemple explicites :

Markdown
Crée un catalogue interactif pour une parure de lit en lin fictive.
Propose les couleurs Avoine et Argile, la taille Queen à 140 USD et
la taille King à 160 USD. Identifie clairement les photos et les prix
comme des exemples. Présente les dimensions, un guide pour un bonnet
de 38 cm, les matières et l'entretien. Permets de choisir une couleur,
une taille et une quantité, puis d'ajouter la sélection à un panier
de démonstration avec un total détaillé. Ajoute des avis clairement
fictifs et un filtre pour ne voir que ceux avec photos. Cette application
sert à explorer les produits : n'ajoute pas de paiement et ne prétends
pas afficher des stocks en temps réel.

Remplacez toutes les données d'exemple par celles de votre catalogue avant un usage public. Consultez Créer une application interactive sur votre canvas pour la création, le partage et les données enregistrées. L'exemple ci-dessous illustre une interaction ; sa mise en page et ses produits ne sont pas un résultat garanti de la demande.

Essayer l'exemple de linge de lit

La page Slowfield réunit photographies, couleurs, tailles, quantités, panier et filtres d'avis dans une même expérience produit.

Ouvrir dans un nouvel onglet
Page de produit en lin avec choix de couleur et de taille, panier de démonstration et filtres d'avis

Cet exemple utilise des données de démonstration. Le rechargement réinitialise vos modifications.

Essayez ces deux comparaisons :

  1. Passez de Queen à King, modifiez la quantité et examinez le montant du bouton d'ajout au panier. Ajoutez une sélection et ouvrez Bag pour la vérifier.
  2. Filtrez les avis pour ne conserver que ceux avec photos. Comparez les informations qu'ils apportent aux photographies du studio plus haut.

L'aperçu utilise des données temporaires. Les sélections et les modifications disparaissent au rechargement. Ajouter un article au panier ne crée aucun achat réel, ne réserve aucun stock et ne prélève aucun paiement.

Répondre à la question qui reste ouverte

Après un essai, demandez à la personne ce qu'elle n'a pas pu trancher. Faites-en une amélioration ciblée :

Markdown
Ajoute à côté du sélecteur de taille une comparaison du contenu exact
et des dimensions des parures Queen et King. Garde la taille choisie
visible pendant la consultation. Conserve le contenu actuel du panier.

Avant de partager votre catalogue, vérifiez toutes les variantes dans la liste source : photographies, unités, prix et combinaisons indisponibles. Modifiez la quantité après un changement de variante et assurez-vous que le récapitulatif reste correct. Identifiez les avis fictifs pour éviter toute confusion avec des témoignages clients. Si l'étape suivante doit recueillir une demande personnalisée, poursuivez avec un formulaire de commande en définissant précisément ce à quoi son envoi engage le visiteur.

Donner un avis

Cet article vous a-t-il aidé ?