® Work · Websites
CMayCollections
A made-to-measure online shop for a trading card retailer: catalogue, accounts, loyalty, SEO in two languages and a back-office the team runs on its own.
- Type
- E-commerce website
- Role
- Web design, development, SEO, hosting
- Year
- 2026
- Status
- LHM group project
01
The project
CMay Collections sells trading cards, manga and merchandise to collectors and resellers. The brief: a shop that speaks to collectors, loads fast, ranks on Google in French and English, and that the team can run without a developer. Shopify handles stock and payment; everything visitors see is built to measure.
- URLs in the sitemap
- 538
- admin screens
- 16
- languages
- FR / EN
- themes, light and dark
- 2
02
Art direction
The brand identity was created by Mito Studio: logo, a bright palette and the DM Sans typeface. We turned it into an interface: the C emblem as a watermark pattern, buttons with offset shadows, light and dark themes. The brand olive failed contrast in small text, so it is darkened for text and kept as is for backgrounds and borders.
Palette
- Off-white#F7F7F7
- Light green#C1D969
- Olive#83A848
- Yellow#F5E279
- Blue#394BF3
- Black#000000
Typeface
Aa
DM Sans Bold / Regular
Brand identity: Mito Studio
Light and dark themes
03
The experience
Every screen follows the theme the visitor chooses, light or dark, on desktop and on mobile.
04
What we built
Shop and checkout
A catalogue built for collectors, with Shopify kept for what it does best: stock and payment.
- Browsing by universe, series and category, plus manga and merchandise
- Filters for availability, language, rarity and price, kept in the URL
- Accent-tolerant search across the catalogue
- Product pages with gallery, variants, reviews and a sticky buy bar
- Cart with recommendations; payment on Shopify's secure checkout
- Preorders read from Shopify and back-in-stock alerts by e-mail
Accounts, loyalty and buyback
Reasons to come back, wired to real orders.
- Customer area: orders, addresses, alerts, wishlist, settings
- CMay Coins credited by the Shopify order webhook, protected against double counting
- Coins turned into Shopify discount codes, with a lock against double spending
- Referral programme
- Order tracking with an e-mail and an order number
- Collection buyback form with photo upload
Made-to-measure back-office
The team runs the shop day to day without touching code.
- Dashboard with KPIs, charts and live visitors
- Orders, abandoned carts and loyalty follow-up
- Moderation of customers, newsletter, buyback requests and reviews
- Homepage section editor and discount code creation
- Blog editor with bilingual FR/EN articles drafted by AI (Claude)
Transactional e-mails
Branded e-mails sent through Resend.
- Sign-up, password reset and login e-mails in the brand's colours
- Newsletter welcome
- Buyback acknowledgement for the customer, notification for the team
- Back-in-stock alerts and contact form
05
SEO
SEO was part of the build, not an afterthought, then worked through successive audits. Every public page exists in French and English with its own translated URL.
Indexable pages
- URLs in the sitemap, FR and EN
- 538
- product pages (FR)
- 158
- universe, category and series pages (FR)
- 74
- blog pages (FR)
- 19
- Translated FR/EN URLs, canonical and hreflang on every page, x-default to French
- Sitemap regenerated every hour, one entry per language, empty pages left out
- Empty universes, categories and series set to noindex automatically, made indexable again as soon as a product arrives
- Structured data: Organization, WebSite, Product with offers and ratings, BreadcrumbList, ItemList, FAQPage, BlogPosting
- Google Merchant Center product feed
- Unique FR/EN editorial text and FAQ on universe, category and series pages
- Product titles and meta descriptions written in Shopify and respected on the site
- Bilingual blog: release calendars and buying guides
- llms.txt for AI assistants, and robots rules per language
06
Performance
An audit showed every public page was rebuilt on each visit, by a server in the United States. We moved the site to a structure that can be cached at the edge and moved the servers to Paris, next to the database.
Internal measurements from France: audit of 6 July 2026 (no cache) and check of 14 October 2026 (CDN cache), several requests each.
- Pages cached at the edge and refreshed every 5 minutes
- Product pages generated in advance
- Instant refresh when a product changes in Shopify (webhook)
- Servers in Paris (Vercel cdg1), next to the Supabase database
- Images resized by Shopify's CDN
07
Security and compliance
A shop handles accounts and orders: security and compliance are built in.
- Content Security Policy: enforced on structural rules, full policy monitored with a violation collector
- HSTS with preload, nosniff, frame and permissions headers
- Signed Shopify webhooks and auth e-mail hook
- Rate limiting on contact, newsletter, order lookup and uploads
- Safe redirects after login, locked-down database functions
- GDPR cookie banner matching the trackers actually used
- WCAG AA contrast in both themes, focus management in dialogs
Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Shopify Storefront
- Supabase
- Upstash
- Resend
- Vercel
- Claude (IA)
A project like this one?