Organiser sa boutique

Les collections structurent votre Shopping App et organisent vos produits. Si votre app était une boutique physique, les collections en seraient les rayons.

Elles décident aussi de ce que votre client peut atteindre. Un produit rattaché à aucune collection existe bien dans votre boutique, et il se vend, mais on y accède par son adresse directe : par un lien que vous envoyez, par une recherche, par un widget de la home. Rattacher chaque produit à au moins une collection est donc le premier réflexe, avant même de réfléchir à votre organisation.

Elles sont souples sur deux plans. Dans le temps d'abord : une collection s'ajoute, se supprime, s'affiche ou se masque en un clic, ce qui permet des collections temporaires. Dans l'organisation ensuite : elles sont transversales, un même produit appartient à plusieurs collections à la fois.

C'est cette transversalité qui mérite votre attention au moment de les créer. Prenons notre magasin de décoration. Un client cherchant un objet de décoration peut raisonner selon trois axes différents : la pièce concernée, le type d'objet, la tendance du moment. Nous avons donc créé neuf collections réparties sur ces trois axes :

Par pièce : Bedroom, Bathroom, Kitchen

Par type d'objet : Frames, Vases, Pillows

Par tendance : Big in Japan, Keep it Slow, Words matter

Chaque produit appartient donc à plusieurs collections. Il a davantage de chances d'être vu, et le client a davantage de chances de le trouver par le chemin qui lui est naturel.

S'y ajoute une collection Sales, qui regroupe les produits en solde. Elle est évolutive, et se masque hors période de soldes.

Rendez-vous dans Produits › Collections. Cliquez sur Ajouter une collection.

Vous renseignez ensuite le titre, une image d'illustration, et l'ordre d'affichage des produits. Le titre est tenu à 32 caractères, ce qui est une contrainte utile : un nom de rayon se lit dans un menu, sur un écran de téléphone, et les noms courts y gagnent toujours.

Pour l'ordre d'affichage, la règle est toujours la même : demandez-vous ce que cherche votre client.

Six ordres automatiques vous sont proposés, par paires : la date de création, du plus récent au plus ancien ou l'inverse, le prix, du plus bas au plus élevé ou l'inverse, et le titre, de A à Z ou de Z à A. Le septième mode est manuel.

• La date met les nouveautés en tête. C'est le bon choix pour une boutique de vêtements réapprovisionnée régulièrement, ou pour une librairie dont les clients reviennent chercher de nouvelles lectures.
• Le prix croissant convient à une épicerie, où le client veut maîtriser son budget. Le prix décroissant sert plutôt une collection haut de gamme, où la première fiche donne le niveau.
• L'ordre alphabétique est celui des catalogues qu'on consulte en sachant déjà le nom de ce qu'on cherche : pièces détachées, références techniques, vins.
• Le mode manuel vous laisse pousser en tête ce que vous voulez vendre en priorité, et contrôler entièrement le rendu visuel de votre liste.

Cet ordre appartient à la collection, pas à la boutique. Vos nouveautés peuvent donc s'afficher par date pendant que votre sélection du mois reste rangée à la main. C'est ce qui rend le mode manuel tenable : les ordres automatiques s'appliquent tout seuls aux produits que vous ajoutez ensuite, le manuel vous demande d'y revenir, alors réservez-le aux collections qui le méritent.

N'oubliez pas le SEO. Vos collections sont indexables au même titre que vos fiches produit. Remplissez les balises Titre et Meta description, et personnalisez les URL avec vos mots-clés.

Une collection atteint le menu de votre app de deux façons, et c'est là que se joue l'allure de votre navigation.

Seule. Chaque collection porte son bloc Visibilité dans le menu, où vous cochez Lister la collection dans le menu et choisissez sa place. Elle devient une entrée à part entière, au même titre qu'une section. Une boutique de trois rayons les affiche ainsi, et son client embrasse tout le catalogue d'un regard.

Groupée. La section Liste de collections en réunit plusieurs sous une seule entrée. Le repère utile : au-delà de cinq rayons, le menu gagne à être regroupé.

En vocabulaire e-commerce, cette seconde façon est la distinction entre catégorie et sous-catégorie, la liste tenant la catégorie et les collections les sous-catégories. Si vous arrivez d'une autre plateforme, c'est le geste que vous connaissez sous un autre nom.

Reprenons la boutique de décoration et ses dix collections. Sans regroupement, le menu de l'app serait saturé.

Nous avons donc créé trois listes, reprenant les trois axes de recherche, avec trois collections chacune :

• Pièces : Bedroom, Bathroom, Kitchen
• Objets : Frames, Vases, Pillows
• Tendances : Big in Japan, Keep it Slow, Words matter

La collection Sales, elle, reste hors liste : nous voulons qu'elle soit accessible le plus directement possible. C'est une décision à garder en tête, le rangement ne doit jamais enterrer ce qui doit rester en surface.

Une liste de collections est une section de votre Shopping App. Elle s'ajoute comme n'importe quelle section, depuis Mon app › Structure. Cliquez sur Ajouter une section, puis choisissez Liste de collections.

Donnez un titre à votre section, associez-lui une image, et validez.

Pour y placer vos collections, deux méthodes :

• cliquez sur l'icône « + » pour sélectionner les collections à intégrer
• ou faites glisser les collections directement sous la section Liste de collection

Trois layouts, dont un qui dépend de votre mode de navigation.

Swipe Submenu place vos collections en sous-menu, sous la navigation principale de l'app. Il n'est disponible qu'en mode de navigation « Swipe », celui où l'on passe d'une section à l'autre en balayant l'écran horizontalement. C'est le layout par défaut du catalogue, mais il est couplé à la navigation : ne le retenez que si votre app assume ce mode, jamais comme simple solution de repli.

Classic présente vos rayons en lignes, avec une petite vignette et le nom en gras, plusieurs par écran. C'est la posture annuaire : elle convient quand vous avez beaucoup de rayons, que le nom compte plus que l'image, et que ça doit fonctionner même sans visuels forts. C'est aussi le repli naturel des deux autres.

Visual est une vitrine : de grandes cartes pleine largeur, l'image du rayon en fond et le nom en surimpression. À choisir quand les rayons se choisissent à l'œil, en mode, en déco ou en alimentaire.

Une réserve sur ce dernier : il exige de bons visuels sur toutes vos collections. Si certaines n'en ont pas, ou de mauvaise qualité, repliez-vous sur Classic.

Le choix se fait dans Mon app › Structure, sur le menu de votre section, Modifier le design. Classic et Visual s'appliquent à n'importe quel mode de navigation. Si votre app n'est pas en mode Swipe, le back office grise Swipe Submenu et vous propose un lien pour changer de menu.

Non, et c'est un détail qui peut compter. Nous recommandons de garder une cohérence de design dans toute votre app, mais varier les layouts permet de signaler une hiérarchie.

Prenons une épicerie dont le catalogue s'organise ainsi :

• Alimentaire
• Frais : Fruits, Légumes
• Vrac : Céréales, Riz & Pâtes
• Santé & Beauté : Cosmétiques, Huiles essentielles

Ici, certaines listes de collections contiennent non pas des collections, mais d'autres listes de collections. Il y a donc deux niveaux à distinguer. Appliquer un layout différent au niveau 1 et au niveau 2 évite que le client se perde dans l'arborescence.

Un tag est un mot-clé attaché à un produit, comme un marqueur. Vous pouvez en associer plusieurs à un même produit.

Ils servent d'abord à retrouver vos produits dans votre back office. Mais leur intérêt principal est ailleurs : ils pilotent l'affichage côté client.

• ils filtrent les widgets liste de produits de votre home
• ils alimentent, avec les collections, le bloc de produits similaires de vos fiches
• ils alimentent les résultats de la section recherche de votre boutique

Voyez les tags comme des collections secondaires, invisibles dans la navigation mais actives dans l'affichage. Ils se construisent en général sur les caractéristiques de vos produits : couleur, matière, forme.

Un exemple. Dans une boutique de vêtements, un pull en laine marron à col roulé se range dans la liste de collections « Vêtement », collection « Pull ». On lui associe les tags « colroulé », « marron », « laine ».

Deux usages en découlent immédiatement. Pour afficher tous vos articles en laine sur la home, il suffit de filtrer sur le tag « laine ». Et le pull pourra apparaître comme produit complémentaire sous un pantalon marron.

C'est la différence de fond avec les collections : la collection organise ce que le client parcourt, le tag organise ce que vous lui présentez.

L'ajout se fait à la création ou à la modification d'un produit. Dans le menu de droite de la page d'édition de la fiche, saisissez vos tags dans le champ Tags. Publiez pour valider.

Deux règles d'écriture décident de la santé de votre vocabulaire sur la durée. Un tag s'écrit en un mot, sans espace, ce qui explique le « colroulé » de l'exemple précédent. Et la casse est ignorée, laine et Laine sont le même tag, vous n'avez donc pas à surveiller vos majuscules.

Le reste tient à la discipline, et le back office vous donne l'outil : au-dessus du champ, Voir tous les tags ouvre la liste de ceux qui existent déjà dans votre boutique, avec une recherche et un tri par ordre alphabétique ou par fréquence d'usage. Prenez le réflexe d'y piocher plutôt que de retaper. Un vocabulaire parti en laine, lainage et purelaine filtre trois fois moins de produits qu'il n'en existe, et c'est une dérive qui se découvre au bout de deux cents fiches.