® Réalisation · Sites web
CMayCollections
Une boutique en ligne sur mesure pour un vendeur de cartes à collectionner : catalogue, comptes, fidélité, SEO en deux langues et un back-office que l'équipe pilote seule.
- Type
- Site e-commerce
- Rôle
- Design web, développement, SEO, hébergement
- Année
- 2026
- Statut
- Projet du groupe LHM
01
Le projet
CMay Collections vend des cartes à collectionner, des mangas et des produits dérivés, aux collectionneurs comme aux revendeurs. Le besoin : une boutique qui parle aux collectionneurs, se charge vite, se trouve sur Google en français et en anglais, et que l'équipe fait vivre sans développeur. Shopify gère le stock et le paiement ; tout ce que voit le visiteur est construit sur mesure.
- URL dans le sitemap
- 538
- écrans d'administration
- 16
- langues
- FR / EN
- thèmes, clair et sombre
- 2
02
Direction artistique
L'identité de la marque a été créée par Mito Studio : logo, palette vive et typographie DM Sans. Nous l'avons déclinée en interface : l'emblème C en motif de fond, des boutons à ombre décalée, un thème clair et un thème sombre. Le vert olive de la marque ne passait pas le contraste en petit texte : il est assombri pour le texte et conservé pour les fonds et les bordures.
Palette
- Blanc cassé#F7F7F7
- Vert clair#C1D969
- Vert olive#83A848
- Jaune#F5E279
- Bleu#394BF3
- Noir#000000
Typographie
Aa
DM Sans Bold / Regular
Identité visuelle : Mito Studio
Thème clair et thème sombre
03
L'expérience
Chaque écran suit le thème choisi par le visiteur, clair ou sombre, sur ordinateur comme sur mobile.
04
Ce que nous avons construit
Boutique et paiement
Un catalogue pensé pour les collectionneurs, Shopify gardant ce qu'il fait de mieux : le stock et le paiement.
- Navigation par univers, série et catégorie, plus mangas et produits dérivés
- Filtres disponibilité, langue, rareté et prix, conservés dans l'URL
- Recherche dans tout le catalogue, insensible aux accents
- Fiches produit avec galerie, variantes, avis et barre d'achat fixe
- Panier avec suggestions ; paiement sur le checkout sécurisé de Shopify
- Précommandes lues depuis Shopify et alertes de retour en stock par e-mail
Comptes, fidélité et rachat
Des raisons de revenir, branchées sur les vraies commandes.
- Espace client : commandes, adresses, alertes, liste d'envies, réglages
- CMay Coins crédités par le webhook de commande Shopify, protégés contre les doubles comptages
- Coins convertis en codes de réduction Shopify, avec un verrou contre la double dépense
- Programme de parrainage
- Suivi de commande avec un e-mail et un numéro
- Formulaire de rachat de collections avec envoi de photos
Back-office sur mesure
L'équipe pilote la boutique au quotidien sans toucher au code.
- Tableau de bord avec indicateurs, graphiques et visiteurs en direct
- Suivi des commandes, des paniers abandonnés et de la fidélité
- Modération des clients, de la newsletter, des demandes de rachat et des avis
- Éditeur des sections de la page d'accueil et création de codes promo
- Éditeur de blog avec articles bilingues FR/EN rédigés par IA (Claude)
E-mails transactionnels
Des e-mails aux couleurs de la marque, envoyés par Resend.
- Inscription, mot de passe oublié et connexion aux couleurs de la marque
- Bienvenue à la newsletter
- Accusé de réception de rachat pour le client, notification pour l'équipe
- Alertes de retour en stock et formulaire de contact
05
SEO
Le SEO a fait partie de la construction, pas d'une finition, puis a été travaillé au fil d'audits successifs. Chaque page publique existe en français et en anglais, avec sa propre URL traduite.
Pages indexables
- URL dans le sitemap, FR et EN
- 538
- fiches produit (FR)
- 158
- pages univers, catégorie et série (FR)
- 74
- pages de blog (FR)
- 19
- URL traduites FR/EN, canonique et hreflang sur chaque page, x-default vers le français
- Sitemap régénéré toutes les heures, une entrée par langue, pages vides exclues
- Univers, catégories et séries vides en noindex automatique, de nouveau indexables dès l'arrivée d'un produit
- Données structurées : Organization, WebSite, Product avec offres et notes, BreadcrumbList, ItemList, FAQPage, BlogPosting
- Flux produits Google Merchant Center
- Textes éditoriaux et FAQ uniques FR/EN sur les pages univers, catégorie et série
- Titres et méta descriptions produits rédigés dans Shopify et respectés sur le site
- Blog bilingue : calendriers des sorties et guides d'achat
- Fichier llms.txt pour les assistants IA et règles robots par langue
06
Performance
Un audit a montré que chaque page publique était recalculée à chaque visite, par un serveur situé aux États-Unis. Nous avons fait passer le site sur une structure mise en cache au plus près des visiteurs et déplacé les serveurs à Paris, à côté de la base de données.
Mesures internes depuis la France : audit du 6 juillet 2026 (sans cache) et relevé du 14 octobre 2026 (cache CDN), plusieurs requêtes à chaque fois.
- Pages en cache au plus près des visiteurs, actualisées toutes les 5 minutes
- Fiches produit générées à l'avance
- Actualisation immédiate quand un produit change dans Shopify (webhook)
- Serveurs à Paris (Vercel cdg1), à côté de la base Supabase
- Images redimensionnées par le CDN de Shopify
07
Sécurité et conformité
Une boutique gère des comptes et des commandes : la sécurité et la conformité font partie du socle.
- Politique de sécurité du contenu (CSP) : règles structurelles appliquées, politique complète surveillée avec un collecteur de violations
- HSTS avec préchargement, en-têtes nosniff, cadres et permissions
- Webhooks Shopify et hook d'envoi des e-mails d'authentification signés
- Limitation de débit sur le contact, la newsletter, le suivi de commande et les envois de fichiers
- Redirections sûres après connexion, fonctions de base de données verrouillées
- Bandeau cookies RGPD aligné sur les traceurs réellement utilisés
- Contrastes WCAG AA dans les deux thèmes, gestion du focus dans les fenêtres
Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Shopify Storefront
- Supabase
- Upstash
- Resend
- Vercel
- Claude (IA)
Un projet comme celui-ci ?