INNER SELF
INNER SELF
Sport
Shopify
UI/UX
2026
Mandat
TREIZE a conçu et développé le gabarit de fiche produit (single-product) du thème Shopify d’INNER SELF : expérience utilisateur, intégration et logique de contenu. Nous avons aussi pris en charge l’optimisation du référencement naturel de la boutique.
Le résultat est un gabarit unique, alimenté par des données structurées, qui sert l’ensemble du catalogue : t-shirts, cuissards, shorts et accessoires, pour hommes et pour femmes.
Objectifs
- Présenter chaque produit comme une pièce d’équipement technique, sans alourdir l’achat
- Aider le client à choisir la bonne pièce et la bonne taille du premier coup, pour réduire les retours
- Donner à l’équipe d’INNER SELF un gabarit qu’elle alimente seule, produit après produit
- Améliorer la visibilité organique de la boutique sur les recherches de vêtements de course
- Servir une clientèle internationale, en plusieurs devises et unités de mesure
Une fiche produit qui se lit comme une fiche technique
Un coureur ne choisit pas un t-shirt comme on choisit un chandail de tous les jours. Il veut savoir s’il pourra le porter à 10 °C comme à 35 °C, s’il est fait pour une sortie facile ou un entraînement soutenu, et où l’air circule.
La fiche produit répond à ces questions en trois chapitres, accessibles par une sous-navigation : le produit, son système (Pace_System) et son tissu (PacePro™). On y trouve une échelle d’intensité, une plage de température en Celsius ou en Fahrenheit, les spécifications numérotées et les gros plans associés.
L’achat reste simple. On bascule entre un modèle homme et une modèle femme pour voir la coupe, on consulte un guide des tailles illustré en pouces ou en centimètres, et chaque produit affiche sa version et sa date de sortie, comme un logiciel.
Côté développement, chaque bloc d’information est un composant du thème Shopify alimenté par des champs personnalisés (metafields) : intensité, plage de température, tissu, spécifications, version. Le tissu est défini une seule fois et réutilisé par tous les produits qui le portent. Les bascules homme/femme, °C/°F et pouces/centimètres s’exécutent côté navigateur, sans recharger la page, et les galeries sont servies en WebP par le CDN de Shopify.
Du SEO pensé pour le commerce en ligne
Une boutique Shopify peut être belle et rester invisible. Les pages de couleurs se cannibalisent, les images n’ont pas de description et les extraits dans Google reprennent n’importe quel bout de texte.
Nous avons traité chaque couleur comme une page à part entière. Le Performance T-shirt bleu, noir, blanc cassé et rouge vintage a chacun sa propre adresse, reliée aux autres par des pastilles de couleur. Un acheteur qui cherche un t-shirt de course bleu arrive directement sur le bon produit.
Les avis clients vérifiés, affichés sur chaque fiche, ajoutent du contenu frais et crédible, en français comme en anglais.
Côté développement, chaque fiche déclare son URL canonique pour éviter le contenu dupliqué entre couleurs. Les titres, métadescriptions et balises de partage (Open Graph, Twitter) sont générés à partir des données du produit. Chaque image porte un texte alternatif descriptif (produit, couleur, angle, modèle), ce qui sert à la fois le référencement dans Google Images et l’accessibilité.
Un gabarit que la marque alimente seule
Une fiche produit riche ne vaut rien si chaque nouveau produit demande un développeur. INNER SELF lance des collections chaque saison et devait pouvoir publier sans nous.
L’équipe remplit des champs clairs dans l’administration Shopify : intensité, tissu, spécifications, guide des tailles, photos par modèle. La page s’assemble d’elle-même. Un champ laissé vide masque simplement son bloc, sans casser la mise en page.
Cette approche se transpose à toute marque dont le produit a quelque chose à expliquer : équipement de plein air, cosmétiques, accessoires techniques.
Côté développement, le gabarit repose sur les sections et les blocs du thème Shopify (Online Store 2.0) et sur des métaobjets pour les données partagées, comme les tissus. La logique d’affichage conditionnelle est écrite en Liquid. Le gabarit reste compatible avec Shopify Markets : prix, devises et taxes s’adaptent au pays du visiteur sans code supplémentaire.
