® Proyecto · Sitios web
CMayCollections
Una tienda online a medida para un vendedor de cartas coleccionables: catálogo, cuentas, fidelidad, SEO en dos idiomas y un back-office que el equipo gestiona solo.
- Tipo
- Sitio de comercio electrónico
- Rol
- Diseño web, desarrollo, SEO, alojamiento
- Año
- 2026
- Estado
- Proyecto del grupo LHM
01
El proyecto
CMay Collections vende cartas coleccionables, manga y productos derivados a coleccionistas y revendedores. La necesidad: una tienda que hable a los coleccionistas, cargue rápido, aparezca en Google en francés e inglés y que el equipo gestione sin un desarrollador. Shopify se encarga del stock y del pago; todo lo que ve el visitante está hecho a medida.
- URL en el sitemap
- 538
- pantallas de administración
- 16
- idiomas
- FR / EN
- temas, claro y oscuro
- 2
02
Dirección artística
La identidad de la marca la creó Mito Studio: logotipo, una paleta viva y la tipografía DM Sans. La convertimos en interfaz: el emblema C como motivo de fondo, botones con sombra desplazada, tema claro y oscuro. El verde oliva de la marca no cumplía el contraste en texto pequeño: se oscurece para el texto y se mantiene en fondos y bordes.
Paleta
- Blanco roto#F7F7F7
- Verde claro#C1D969
- Verde oliva#83A848
- Amarillo#F5E279
- Azul#394BF3
- Negro#000000
Tipografía
Aa
DM Sans Bold / Regular
Identidad visual: Mito Studio
Tema claro y tema oscuro
03
La experiencia
Cada pantalla sigue el tema que elige el visitante, claro u oscuro, en ordenador y en móvil.
04
Lo que construimos
Tienda y pago
Un catálogo pensado para coleccionistas, dejando a Shopify lo que mejor hace: el stock y el pago.
- Navegación por universo, serie y categoría, además de manga y productos derivados
- Filtros de disponibilidad, idioma, rareza y precio, guardados en la URL
- Búsqueda en todo el catálogo, sin importar los acentos
- Fichas de producto con galería, variantes, reseñas y barra de compra fija
- Carrito con sugerencias; pago en el checkout seguro de Shopify
- Preventas leídas desde Shopify y alertas de reposición por e-mail
Cuentas, fidelidad y compra
Motivos para volver, conectados a pedidos reales.
- Área de cliente: pedidos, direcciones, alertas, lista de deseos, ajustes
- CMay Coins acreditados por el webhook de pedidos de Shopify, protegidos contra el doble cómputo
- Coins convertidos en códigos de descuento de Shopify, con bloqueo contra el doble gasto
- Programa de referidos
- Seguimiento del pedido con un e-mail y un número
- Formulario de compra de colecciones con envío de fotos
Back-office a medida
El equipo gestiona la tienda a diario sin tocar el código.
- Panel con indicadores, gráficos y visitantes en directo
- Seguimiento de pedidos, carritos abandonados y fidelidad
- Moderación de clientes, boletín, solicitudes de compra y reseñas
- Editor de secciones de la página de inicio y creación de códigos de descuento
- Editor de blog con artículos bilingües FR/EN redactados con IA (Claude)
E-mails transaccionales
E-mails con los colores de la marca, enviados con Resend.
- Registro, contraseña olvidada e inicio de sesión con los colores de la marca
- Bienvenida al boletín
- Acuse de recibo de compra para el cliente, aviso para el equipo
- Alertas de reposición y formulario de contacto
05
SEO
El SEO formó parte de la construcción, no de un retoque final, y luego se trabajó en auditorías sucesivas. Cada página pública existe en francés e inglés, con su propia URL traducida.
Páginas indexables
- URL en el sitemap, FR y EN
- 538
- fichas de producto (FR)
- 158
- páginas de universo, categoría y serie (FR)
- 74
- páginas de blog (FR)
- 19
- URL traducidas FR/EN, canonical y hreflang en cada página, x-default hacia el francés
- Sitemap regenerado cada hora, una entrada por idioma, sin páginas vacías
- Universos, categorías y series vacíos en noindex automático, de nuevo indexables en cuanto llega un producto
- Datos estructurados: Organization, WebSite, Product con ofertas y valoraciones, BreadcrumbList, ItemList, FAQPage, BlogPosting
- Feed de productos de Google Merchant Center
- Textos editoriales y FAQ únicos FR/EN en las páginas de universo, categoría y serie
- Títulos y meta descripciones de producto escritos en Shopify y respetados en el sitio
- Blog bilingüe: calendarios de lanzamientos y guías de compra
- Archivo llms.txt para asistentes de IA y reglas robots por idioma
06
Rendimiento
Una auditoría mostró que cada página pública se recalculaba en cada visita, desde un servidor en Estados Unidos. Pasamos el sitio a una estructura que se guarda en caché cerca del visitante y trasladamos los servidores a París, junto a la base de datos.
Mediciones internas desde Francia: auditoría del 6 de julio de 2026 (sin caché) y comprobación del 14 de octubre de 2026 (caché CDN), varias peticiones cada vez.
- Páginas en caché cerca del visitante, actualizadas cada 5 minutos
- Fichas de producto generadas de antemano
- Actualización inmediata cuando un producto cambia en Shopify (webhook)
- Servidores en París (Vercel cdg1), junto a la base de datos Supabase
- Imágenes redimensionadas por el CDN de Shopify
07
Seguridad y cumplimiento
Una tienda gestiona cuentas y pedidos: la seguridad y el cumplimiento forman parte de la base.
- Política de seguridad de contenidos (CSP): reglas estructurales aplicadas y política completa supervisada con un colector de infracciones
- HSTS con precarga, cabeceras nosniff, marcos y permisos
- Webhooks de Shopify y hook de envío de los e-mails de autenticación firmados
- Limitación de peticiones en contacto, boletín, seguimiento de pedidos y subida de archivos
- Redirecciones seguras tras el inicio de sesión y funciones de base de datos protegidas
- Banner de cookies RGPD alineado con los rastreadores realmente usados
- Contrastes WCAG AA en ambos temas, gestión del foco en las ventanas
Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Shopify Storefront
- Supabase
- Upstash
- Resend
- Vercel
- Claude (IA)
¿Un proyecto como este?