Comment concevoir une boutique Shopify pour une marque de bijoux

Points clés

• Un bon design de boutique de bijoux sur Shopify répond à un problème : un petit objet photographié sur fond blanc ne dit rien à l’acheteur sur l’échelle, le poids ou la précision des couleurs.
• Montrez la pièce portée et en main, gardez une référence d’échelle cohérente dans tout le catalogue, et ajoutez des macros et de la vidéo pour la finition et le mouvement.
• Placez un tableau de spécifications exact sur la page produit et stockez les valeurs sous forme de metafields, afin qu’elles alimentent également les filtres de vos collections.
• Shopify autorise trois options et 2 048 variantes par produit, donc la gravure et les messages cadeaux ont leur place dans les line item properties, et non dans la matrice de variantes.
• Les poinçons, la mise à taille, la garantie et l’expédition assurée doivent figurer sur la page produit, et non dans le footer des politiques.

Le design d’une boutique de bijoux Shopify n’est pas un exercice de style. C’est un ensemble de solutions à une réalité gênante : l’acheteur ne peut pas manipuler la pièce.

Une créole de 12 mm et une créole de 22 mm semblent identiques sur un fond blanc. Une chaîne en vermeil et une chaîne en or massif 14k rendent pareil en photo. Ce guide explique comment concevoir la boutique autour de cette lacune. Pour avoir d’abord des points de référence visuels, consultez notre sélection des meilleures boutiques Shopify de bijoux.

Pourquoi vous pouvez nous faire confiance

Nous sommes dans l’écosystème Shopify depuis plus de quatre ans et avons travaillé avec des centaines de marques Shopify sur leurs boutiques, y compris des marques de bijoux à tous les niveaux de prix. Nous développons Fudge, un éditeur de boutique IA noté 5.0 sur le Shopify App Store avec le statut Built for Shopify, nous travaillons donc sur la même couche de thème où se prennent ces décisions.

Pourquoi le design d’une boutique de bijoux est plus difficile que la plupart des catégories

La plupart des catégories donnent un point de repère à l’acheteur. Les bijoux ne leur en donnent aucun. Les pièces sont petites, les différences se mesurent en millimètres, et deux articles visuellement identiques peuvent avoir un prix multiplié par dix. Quatre lacunes causent l’essentiel de l’hésitation :

• L’échelle. La photographie agrandit. Un pendentif remplissant un cadre de 2000px paraît beaucoup plus grand que les 8 mm qu’il fait en réalité.
• La matière. Creux contre massif, et plaqué contre gold-filled ou massif, sont invisibles sur une photo.
• La précision des couleurs. L’or jaune, l’or rose et le vermeil sont si proches à l’écran qu’une photo non calibrée est trompeuse.
• La taille. La taille de bague et la longueur de chaîne doivent être choisies avant que l’acheteur ne puisse essayer quoi que ce soit.

Tout ce qui suit permet de répondre à l’un de ces quatre points.

Direction photographique pour une boutique de bijoux

Traitez l’ensemble des médias comme un document de spécification technique, pas comme une galerie d’art.

Shootez sur modèle et sur main. L’image la plus utile est la pièce portée sur une personne. Cette seule photo résout à la fois l’échelle et le tombé. Prenez des photos avec différentes carnations, et pour les bagues, plusieurs tailles de mains.

Utilisez une référence d’échelle cohérente. Une règle en millimètres superposée, une pièce de monnaie, ou un recadrage sur le bout d’un doigt fonctionnent, à condition que ce soit la même dans tout le catalogue. Fixez sa position dans l’ordre des médias : image hero en premier, sur modèle en deuxième, l’échelle en troisième.

Ajoutez des détails en macro. Les plans macro vendent les parties qui justifient le prix : le sertissage à griffes, la soudure, le fermoir, le poinçon.

Ajoutez de la vidéo ou du 360 pour l’éclat. Les pierres ne ressemblent à des pierres que lorsqu’elles bougent. Shopify héberge directement les vidéos sur le produit, acceptant des uploads jusqu’à 10 minutes, 1 Go et en 4K, pour ensuite les diffuser en MP4 ou HLS.¹ Une boucle de cinq à dix secondes suffit amplement. Découvrez comment ajouter une vidéo à une galerie de produits Shopify.

Précision des tons de métal

La gestion des couleurs a plus d’importance ici que dans la plupart des catégories, car le ton du métal est la variante. Un or rose qui rend comme de l’or jaune génère des retours dont vous n’aviez pas besoin.

Photographiez avec une carte ColorChecker dès la première image de chaque session, exportez en sRGB avec le profil intégré, et photographiez chaque ton de métal séparément plutôt que de recoloriser une seule photo. Ensuite, indiquez également le ton avec des mots : “Or jaune 14k”, pas juste “or”.

Implémentation de la galerie

Un bon ratio est : un hero, deux ou trois sur modèle, deux ou trois macros, une échelle, une vidéo. Au-delà de dix éléments, vous ajoutez de la lourdeur plus que des réponses, et trois contraintes façonnent la construction. 250 médias par produit est le plafond, incluant images, vidéos et modèles 3D.² Les images peuvent aller jusqu’à 5000 x 5000 px et 20 Mo, bien que le format carré en 2048px soit la bonne taille d’upload pour une galerie zoomable.¹ Et l’ordre des médias est défini dans l’admin, c’est donc une décision de design. Pointez le zoom sur l’asset en 2048px, et non sur l’original.

Comment communiquer l’échelle et les spécifications

Chaque page produit de bijoux a besoin d’un tableau de spécifications près de la buy box, et non d’une liste à puces enfouie dans la description.

Donnez toujours les deux unités. Un acheteur américain lit en pouces, un acheteur européen lit en millimètres, et aucun des deux ne devrait avoir à convertir.

Les longueurs de chaîne ont besoin d’un schéma. Un dessin au trait montrant où tombent les chaînes de 16, 18, 20 et 24 pouces sur un buste convertit mieux que les chiffres seuls. Faites de même pour les bracelets et les diamètres de créoles.

La taille des bagues nécessite trois solutions : un tableau de conversion couvrant les tailles US, UK et EU par rapport au diamètre intérieur en millimètres, un baguier PDF imprimable avec une barre de calibration pour que les acheteurs puissent vérifier que leur imprimante l’a bien mis à l’échelle, et un baguier physique gratuit envoyé sur demande au-dessus d’un certain prix.

Stockez les spécifications sous forme de metafields

Les spécifications tapées dans la description s’affichent de manière incohérente, ne peuvent pas être filtrées et doivent être resaisies pour chaque produit. Shopify dispose de définitions de metafields typés pour cela, y compris dimension avec des unités en millimètres et en pouces, et weight (poids) avec des unités en grammes et en onces.³

Un piège : les metafields de dimension et de poids ne sont pas disponibles comme filtres en vitrine. Les types filtrables sont : texte sur une seule ligne, liste de textes sur une seule ligne, décimal, nombre entier, vrai ou faux, et références de métaobjets.⁴ Donc, stockez la longueur de la chaîne en tant que dimension pour l’affichage, et dupliquez-la dans un champ décimal filtrable à côté. Une fois structurées, les mêmes valeurs alimentent le tableau des spécifications, les filtres et votre flux de produits : voir comment ajouter des metafields aux produits Shopify.

Matériaux, provenance et revendications que vous pouvez assumer

Les acheteurs posent trois questions : en quoi est-ce fait, d’où cela vient-il, et comment l’entretenir ?

Répondez à ces trois questions sur la page produit plutôt que dans un document de politique, et soyez précis. Donnez les carats et indiquez si la pièce est massive, gold-filled, en vermeil ou plaquée, avec les microns pour le plaqué. Indiquez le type de pierre, la taille et le carat, précisez si elle est naturelle, créée en laboratoire ou si c’est un simulant, et révélez tout traitement éventuel.

Les allégations de sourcing impliquent des attentes de justification

Des termes comme “libre de conflit” (conflict-free), “sourcé éthiquement” et “or recyclé” ont un poids réglementaire.

Aux États-Unis, les Jewelry Guides de la FTC dans le 16 CFR Part 23 stipulent qu’il est déloyal ou trompeur de fausser l’origine, la teneur en métal, le traitement, la production ou tout autre aspect matériel d’un bijou, et que les qualifications et divulgations doivent être claires et bien en évidence.⁵ Ces mêmes Guides renvoient aux Green Guides pour l’utilisation du mot “recyclé”. Au Royaume-Uni, le Green Claims Code de la CMA exige que les allégations environnementales reposent sur des preuves crédibles et à jour, avec des preuves plus solides pour des allégations plus larges.⁶

Rédigez donc la version spécifique de l’allégation, et non la version large. “Or 14k recyclé, certifié par notre affineur” est défendable. “Bijoux durables” ne l’est pas.

Au Royaume-Uni, le poinçonnage est également une obligation légale au-dessus des poids minimaux de 1g pour l’or, 7,78g pour l’argent, 0,5g pour le platine et 1g pour le palladium, et cela s’applique aux ventes en ligne.⁷ Si vos pièces portent des poinçons, photographiez-les.

Design des variantes pour une catégorie avec trop d’options

Les bijoux comportent plus de choix légitimes que presque n’importe quelle catégorie : métal, pierre, taille, longueur, type de fermoir, gravure. Shopify limite le nombre d’éléments pouvant être des variantes.

Un produit peut avoir jusqu’à trois options et jusqu’à 2 048 variantes.² Trois, pas cinq. Donc, le métal, la taille et la longueur peuvent être des options. La pierre et la gravure ne le peuvent pas, à moins que vous ne supprimiez l’une des trois premières.

Les chiffres grimpent vite : quatre métaux, dix tailles de bagues et trois largeurs d’anneau font 120 variantes avec les trois emplacements utilisés. Les médias constituent le deuxième plafond, à 250 éléments par produit avec un seul assignable par variante, prévoyez donc une image par ton de métal plutôt qu’une par variante.

Design des swatches. Le ton du métal est l’option que les acheteurs choisissent avec les yeux, rendez-la donc sous forme de swatch. Recadrez-le à partir du produit réel dans ce métal plutôt que d’utiliser une couleur CSS unie, gardez une étiquette de texte visible car la couleur seule n’est pas un contrôle accessible, et changez la galerie lorsque le swatch change.

Quand diviser en produits distincts. Divisez lorsque le choix change l’achat plutôt que l’article : la fourchette de prix entre les variantes est large, comme pour une pierre créée en laboratoire par rapport à une pierre naturelle ; vous n’avez plus d’emplacements d’options ; ou les variantes ont des requêtes de recherche distinctes. Reliez les produits divisés avec un bloc “Achetez ce style en” piloté par un metafield de référence de produit.

Personnalisation et sur-mesure

La gravure est l’un des meilleurs leviers de marge en bijouterie, et la chose la plus susceptible de casser une matrice de variantes.

La solution se trouve dans les line item properties : des paires nom-valeur capturées sur le formulaire du produit plutôt que sur la variante, en utilisant des champs input nommés properties[Gravure]. Un préfixe underscore (trait de soulignement) cache une propriété au client lors du checkout tout en l’enregistrant.⁸

<input
  type="text"
  name="properties[Gravure]"
  maxlength="12"
  placeholder="Jusqu'à 12 caractères"
/>

Appliquez la limite de caractères sur l’input lui-même, et non dans une note en dessous, et affichez un aperçu en direct avec la police de gravure au véritable nombre de caractères.

Le sur-mesure modifie deux autres choses. Le délai de fabrication doit être visible avant l’ajout au panier, à côté du prix plutôt que sur la page d’expédition, car un délai découvert après le passage en caisse équivaut à une annulation. Et les articles personnalisés sont généralement non retournables, ce qui doit être indiqué directement sous le champ de gravure. Si un acheteur tape le nom de son enfant dans une case, il devrait lire “les pièces gravées ne peuvent être ni retournées ni échangées” d’un même coup d’œil.

Signaux de confiance pour un achat à forte considération

Les bijoux ont un panier moyen élevé et un faible taux de conversion. L’écart est une question de confiance, et la confiance se construit sur la page produit.

La mise à taille est la particularité des bijoux. Une mise à taille gratuite sous 60 ou 90 jours supprime la plus grande objection à l’achat d’une bague en ligne, et coûte moins cher que le retour qu’elle évite. Énoncez également les conditions de garantie de manière explicite : “réparation à vie des fermoirs et des chaînes” est bien plus fort que “qualité garantie”.

Placez tout cela sous forme de phrases courtes sous le bouton d’ajout au panier, plutôt qu’à l’intérieur d’un accordéon. Voir comment personnaliser une page produit Shopify pour les modèles de mise en page.

Offrir un cadeau est un mode d’achat différent

Une grande part des bijoux est achetée pour quelqu’un d’autre, et les acheteurs de cadeaux ne se comportent pas du tout comme ceux qui achètent pour eux-mêmes. Ils ne connaissent pas la taille de bague du destinataire, ils achètent en fonction de l’occasion et ils travaillent avec une deadline.

• Créez une navigation spéciale cadeaux par destinataire, occasion et prix plutôt que seulement par type de produit : “Cadeaux pour elle à moins de 100 €”, “Anniversaire”, “Demoiselle d’honneur”. Des collections automatisées avec des règles de tags et de prix maintiennent cela à jour.
• Capturez l’emballage et le message cadeau comme line item properties, une case à cocher et un textarea limité, qui remontent jusqu’à la commande et au bordereau d’expédition.
• Affichez une date de livraison, pas une vitesse d’expédition, et publiez les heures limites de dernière commande pendant les périodes de pointe. Si le transporteur ne garantit pas la date, dites “estimé” et assumez-le.
• Supprimez le frein lié à la taille avec des pièces ajustables, un baguier envoyé avant le cadeau, ou une carte-cadeau avec un rendez-vous pour la mise à taille.

La demande se concentre autour de novembre et décembre, de la Saint-Valentin et de la Fête des mères. Construisez les collections cadeaux et les messages de dates limites sous forme de sections réutilisables afin de les activer plutôt que de devoir les recréer chaque année.

Page de collection et design de la navigation pour les bijoux

Les pages de collection remplissent deux rôles : restreindre un vaste catalogue visuellement similaire, et faire du merchandising par occasion.

Filtrez par métal, pierre, prix, style et longueur. Les filtres standards en vitrine couvrent la disponibilité, la catégorie, le prix, le type de produit, les balises (tags) et le fournisseur ; les filtres personnalisés proviennent des options de produits, des metafields et des métaobjets. Une boutique peut afficher jusqu’à 25 filtres, chacun montrant jusqu’à 100 valeurs, et les collections de plus de 5 000 produits n’en affichent aucun.⁴ Utilisez les metafields de variantes là où le filtre doit mener à la bonne variante, et contrôlez rigoureusement les valeurs de filtre, car “Or 14k”, “Or 14K” et “Or Jaune 14k” deviennent trois valeurs distinctes.

Concevez la grille pour des petits objets. Une grille échoue lorsqu’une puce de 8 mm et un bracelet manchette imposant remplissent la même tuile à la même taille apparente. Recadrez de manière cohérente pour que la grille elle-même communique l’échelle, utilisez deux colonnes sur mobile et trois sur desktop, affichez des swatches de métaux sur la tuile et faites en sorte que l’image au survol soit la photo sur modèle.

Faites du merchandising par occasion, pas seulement par type de produit. “Bagues, Colliers, Boucles d’oreilles” est une taxonomie d’entrepôt. Faites tourner des collections de fiançailles, pour tous les jours, d’accumulation (stacking), de superposition (layering) et de premier piercing en parallèle, et elles capteront un volume de recherche que les pages de catégories classiques n’atteindront jamais. Voir personnaliser une page de collection sur Shopify pour la mise en place.

Si vous vendez aux États-Unis, les recherches s’y font sur le terme “jewelry” ; utilisez donc l’orthographe américaine dans vos métadonnées, titres et balises alt destinés aux US, même si la voix de votre marque utilise “jewellery”.

Vitesse pour une catégorie riche en images et vidéos

Tout ce qui précède ajoute du poids à la page, et c’est là que les Core Web Vitals en pâtissent.

Le Largest Contentful Paint (LCP) doit être de 2,5 secondes ou moins, mesuré au 75e percentile des chargements de page et segmenté par mobile et desktop.⁹ Ici, l’élément LCP est presque toujours la première image de la galerie, et le piège classique est de charger toute la galerie de manière eager (immédiatement). Douze images de 2048px appelées au chargement poussent le LCP au-delà de la limite, même sur de bonnes connexions.

• Chargez la première image de la galerie de manière eager avec fetchpriority="high" et en lazy-load le reste.
• Ne lancez jamais de vidéo en lecture automatique comme premier média. Utilisez une image poster avec un bouton de lecture et chargez la vidéo lors de l’interaction.
• Servez des tailles responsives, et gardez l’asset haute résolution pour le zoom derrière l’interaction de zoom.
• Compressez avant l’upload. Voir compresser les images dans Shopify pour les outils.

Mesurez sur une vraie page produit avec une galerie complète. La page d’accueil est rarement la page la plus lente sur une boutique de bijoux.

Comment implémenter : paramètres de thème, metafields ou sections personnalisées

Il y a trois endroits pour placer ce travail, et la réponse est souvent un mélange des trois.

Les paramètres du thème gèrent ce que votre thème supporte déjà : mise en page de la galerie, affichage des swatches, position des badges. Gratuit et instantané, mais limité par ce que l’auteur du thème a construit.

Les metafields gèrent les données : dimensions, poids, pureté, entretien, certification. C’est ici que réside la majorité de la valeur durable, car les données survivent à n’importe quel thème que vous appliquez par-dessus.

Les sections personnalisées gèrent le reste : le tableau des spécifications, le schéma d’échelle, le champ de gravure, le bloc recherche de cadeaux, la modale de guide des tailles. Des sections Liquid avec des paramètres de schéma, de sorte qu’un e-merchandiser puisse les réutiliser sans toucher au code.

C’est pour ce dernier groupe que Fudge a été conçu. Décrivez la section et Fudge écrit le Liquid, le CSS et le JavaScript dans votre thème, en lisant vos données de marque et de produit existantes pour que le résultat corresponde à la boutique. Parce qu’il s’agit de code natif de thème, aucun script tiers ne rend votre tableau de spécifications et aucune couche de widget ne s’ajoute par-dessus votre page produit. Il survit également à une désinstallation. La même chose s’applique aux pages de campagne créées avec le constructeur de pages Shopify.

FAQ