El mapa de la tienda
¿Qué estás viendo?
Antes de diseñar pantallas hay que definir el plano del edificio: qué páginas va a tener tiendacrema.pe, qué hay dentro de cada una y por qué camino llega el hincha desde la portada hasta el pago. Eso es la arquitectura de información. Este mapa es ese plano completo.
Acá no hay diseño todavía (colores y fotos vienen después): lo que se aprueba en esta etapa es que no falte ninguna página ni ningún paso de compra.
Diccionario rápido (sin tecnicismos)
- Plantilla o "molde" —
- el formato base de una página. Como en una imprenta: un molde para fichas de producto, otro para listados, otro para la portada. Se diseña una vez y sirve para muchas páginas.
- Colección —
- un "pasillo" de la tienda: una vitrina que agrupa productos (ej. todas las camisetas, todo lo de niños).
- PDP —
- la ficha de un producto: fotos, talla, precio y botón de compra.
- Checkout —
- la caja registradora: donde se pone la dirección y se paga.
- Nativo —
- viene incluido con Shopify, sin costo ni desarrollo extra.
- —
- una ficha de datos que cargamos una vez (ej. dorsal y stats de un jugador) y las páginas la muestran solas.
- App —
- funcionalidad que se instala como una app del celular, normalmente con mensualidad (ej. el personalizador de camisetas).
- Custom —
- lo programa nuestro equipo a medida para la U.
- Plus only —
- solo existe en el plan más caro de Shopify; lo marcamos para decidir con números en la mano.
- ★ —
- módulo estrella del negocio (donde se gana más plata).
Plantillas, secciones y bloques
Cada plantilla trae su wireframe esquemático (el boceto de la izquierda: muestra la estructura y el orden de los bloques, no el diseño final) y al lado la tabla con el detalle de cada sección. Los números del boceto corresponden a las filas de la tabla. Documento completo en arquitectura.md.
Flujos de usuario
Los recorridos clave: compra del kit, personalización "Arma tu camiseta", shop by player, retro/colaboraciones, post-compra y el ciclo pedido → SAP → comprobante (boleta/factura según DNI/RUC).
Integración SAP Business One
Cómo se conecta la tienda con el ERP del club. SAP es el maestro de catálogo, precios y stock; Shopify manda en la experiencia de compra. Un middleware orquesta las dos plataformas. Detalle completo en sap-integration-prd.md.
Arquitectura general
flowchart LR
subgraph ERP["SAP BUSINESS ONE — MAESTRO"]
SAP["Catálogo · Precios · Stock
Pedidos · Facturación"]
end
subgraph MID["MIDDLEWARE EQAPLA"]
MW["Orquestador
sesión · colas · reintentos · logs"]
end
subgraph STORE["SHOPIFY — TIENDA CREMA"]
SH["Contenido · Carrito
Checkout · Pagos"]
end
SAP -->|"Service Layer · REST/OData"| MW
MW -->|"Admin API"| SH
SH -->|"Webhooks orders/paid"| MW
MW -->|"Pedido de venta"| SAP1. Catálogo · SAP → Shopify
sequenceDiagram
participant SAP as SAP B1
participant MW as Middleware
participant SH as Shopify
MW->>SAP: GET Items modificados (UpdateDate)
SAP-->>MW: Artículos + variantes
alt No existe en Shopify
MW->>SH: Crea producto / variante
else Ya existe
MW->>SH: Actualiza campos maestros (no pisa fotos)
end
MW->>MW: Registra mapeo ItemCode ↔ variantId2. Precios · SAP → Shopify
sequenceDiagram participant SAP as SAP B1 participant MW as Middleware participant SH as Shopify MW->>SAP: Lee lista de precios de la tienda SAP-->>MW: Precio por artículo MW->>MW: Ajusta IGV si aplica MW->>SH: Actualiza variant.price
3. Stock (crítico) · bidireccional
Disponible = InStock (SAP) − Reservado − Buffer
sequenceDiagram participant SAP as SAP B1 participant MW as Middleware participant SH as Shopify Note over SAP,SH: 3a · Refresco de disponibilidad (cada N min) MW->>SAP: GET Items con cambio de stock SAP-->>MW: InStock por almacén MW->>MW: Disponible = InStock − Reservado − Buffer MW->>SH: Actualiza inventory_level Note over SAP,SH: 3b · Venta en tiempo real SH->>MW: webhook orders/paid MW->>SAP: Crea pedido de venta (descuenta stock) MW->>SH: Actualiza disponible (anti-oversell) Note over SAP,SH: 3d · Reconciliación nocturna MW->>SAP: Lee stock total MW->>SH: Compara y ALERTA diferencias
4. Pedido → despacho → comprobante (boleta/factura)
sequenceDiagram participant C as Cliente participant SH as Shopify participant MW as Middleware participant SAP as SAP B1 C->>SH: Paga (elige boleta o factura: DNI/RUC) SH->>MW: webhook orders/paid MW->>MW: ¿order.id ya procesado? (idempotencia) MW->>SAP: Resuelve / crea BusinessPartner (DNI/RUC) MW->>SAP: Crea Orden de venta (+ servicios EST- / PARCHE-) SAP-->>MW: DocEntry Note over SAP: Genera Orden de despacho (entrega) SAP->>SAP: Pedido entregado SAP->>SAP: Emite Boleta o Factura (según lo pedido) SAP-->>MW: Comprobante CPE emitido MW->>SH: Actualiza estado + adjunta comprobante
Facturación electrónica: se emite desde SAP al entregarse el pedido — boleta (DNI) o factura (RUC) según lo que el cliente solicitó. Lo coordina Ángel Pinto (por confirmar accesos). Estado de accesos para el middleware en sap-solicitud-accesos-middleware.md.
Benchmark de tiendas de clubes
7 tiendas oficiales auditadas módulo a módulo. Milan, Real Madrid y Barça corren sobre Shopify — validan la plataforma. River y Boca aportan los patrones comerciales LatAm (cuotas, wallet local, estampa como SKU). Análisis completo en investigacion.md.
Módulos de home por referencia (nº = posición de arriba a abajo)
| Módulo | Milan Shopify | River VTEX | PSG Fanatics | R. Madrid Shopify | Barça Shopify | Boca VTEX | I. Miami Fanatics | Tienda Crema |
|---|---|---|---|---|---|---|---|---|
| Announcement bar | 1 | 1 | 1 | — | — | 1 | 4 | 1 |
| Header + buscador + carrito | 2 | 2 | 2 | 1 | 1 | 2 | 2 | 2 |
| Hero de campaña | 4 | 3 | 4 vídeo | 3 | 2 | 3 | 5 | 3 |
| Kit comprable (carrusel) | 5 | 4 | 5 | — | 3 | — | 7 | 4 |
| Personalizador en home | 8 widget | 8 widget | 6 banner | 6 widget | — | 1+3 hero | — | 5 ★ |
| Shop by player (grid) | menú | — | menú | 4 | 6 | — | footer | 6 |
| Colecciones destacadas / colabs | 7 | 5 | takeover | 7 | 5 | 7 | 5 | 8 |
| Banner retro | 9 | menú | menú | — | 5 | — | — | 9 |
| Tiles por audiencia (H/M/N) | — | 6 | — | — | hero | 6 | 6 | 10 |
| Best sellers / tendencia | 11 UGC | 9 | 5 | 8 | 4 | — | 7 | 7 |
| Fila de beneficios / trust | — | 7 | 9 | — | — | 8 | — | 11 |
| Editorial / blog / SEO | 12-13 | — | 10 | 7 | 7 | — | 9 | 12 |
| Newsletter con incentivo | footer | 11 | −15% | footer | footer | −10% | −10% | 13 · −10% |
| Footer completo | 14 | 12 | 12 | 11 | 9 | 10 | 10 | 14 |
Capacidades clave
| Capacidad | Milan | River | PSG | R.M. | Barça | Boca | I.M. | Tienda Crema |
|---|---|---|---|---|---|---|---|---|
| Personalización nombre + dorsal | ✔ popup 3 pasos | ✔ SKU estampa | ✔ overlay | ✔ in-PDP | ✔ in-PDP | ✔ SKU estampa | ✔ in-PDP | ✔ app + line item properties |
| Jugador oficial ≠ precio nombre libre | = | = | = | ✔ $35/$40 | ✔ 0/€20 | = | ✔ +$5 | ✔ incentiva plantel |
| Hub / colección por jugador | ✔ + stats | campañas | ✔ facetado | ✔ menú | ✔ col.+filtro | ✘ | ✔ | ✔ metaobject + tag |
| Retro como línea permanente | ✔ 24 ítems | ✔ | ✔ Héritage | chico | ✔ 37 ítems | 1 prod. | n/a | ✔ por décadas (1924→) |
| Edición limitada numerada | ✔ | — | ✔ | — | ✔ 1899 uds | — | — | ✔ 1924 uds |
| Barra progreso envío gratis | ✔ €160 | ✔ | ✔ $29 | — | ✔ €110 | — | ✔ | ✔ en drawer |
| Cuotas / wallet local | Klarna | cuotas AR | — | — | — | MP+MODO | BNPL ×3 | MP·Niubiz·Yape·Plin |
| Precio socio / membresía | Rewards | RIVER ID | MyParis | Platinum | Penya | — | — | fase 2: Socio Crema |
| Reviews / UGC | Photoslurp | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | no en fase 1 |
| Cumplimiento legal local visible | Omnibus UE | Bot. arrep. | — | — | — | Bot. arrep. | — | Libro de Reclamaciones |
10 patrones que adoptamos
La personalización es el negocio
6 de 7 tiendas la empujan desde la home. Milan, River y Real Madrid embeben el configurador completo. Sección ★ "Arma tu camiseta" tras el hero.
Home canónica de club
Announcement → hero kit → kit comprable → personaliza → jugadores → colecciones → retro → trust → newsletter. Orden convergente en las 7 referencias.
Jugador = dimensión transversal
Hub editorial con stats (Milan) + colección automática por tag (Barça/RM) + filtro en PLP. Metaobject «jugador», sin app extra.
Retro: oro del club centenario
Milan y Barça lo tratan como línea permanente con storytelling. La U (1924) tiene más historia que casi todas. Timeline por décadas.
Escalera de gama explícita
Hincha → Jugador → Edición limitada numerada (patrón "1899 uds." del Barça ⇒ 1924 uds. para la U). Badge de gama en cada card.
El comercio local manda
River/Boca: cuotas y wallet en el announcement, envío por distrito en PDP, legal local en footer, −10% newsletter. Yape/Plin/Niubiz/MP visibles siempre.
Trust pragmático, no social
Ninguna referencia usa reviews. Oficialidad + políticas claras + fila de USPs + logos de pago. Sin app de reviews en fase 1.
El carrito vende
Drawer con barra de envío gratis (Milan/Barça) + cross-sell de bajo ticket + aviso de plazos de personalizados.
Socio como capa de pricing
RIVER ID, Platinum, Penya. Fase 2: "Socio Crema" con tags de cliente, descuento automático y preventas exclusivas.
Errores a evitar
Facetas bilingües duplicadas (RM), categorías 404 (Boca), drops que desaparecen sin redirect (Barça×Patta). Gobierno de tags y redirects 301 desde el día 1.
Tiendas de referencia
Las 7 tiendas oficiales auditadas en la investigación. Visítalas en vivo para ver los patrones que adoptamos (el análisis módulo a módulo está en la pestaña Benchmark y en investigacion.md; las capturas full-page de cada home están guardadas en la carpeta referencias/ del proyecto).
Solicitud de información al club
¿Para qué sirve esta lista?
Hoy cada foto, dato o acceso que falta se pide al club por separado, y cada pedido frena el proyecto. Esta lista junta los 40 ítems que necesitamos en una sola entrega: completada, el equipo diseña, construye y opera la tienda sin depender de nadie.
Cada ítem dice qué se pide, en qué formato, quién del club debería entregarlo y qué tan urgente es. Pedido transversal: un interlocutor único por categoría y una reunión de kickoff para resolver dudas en una sola sesión. Fecha sugerida para los bloqueantes: 15 días calendario desde la recepción.
Design System de la U
¿Qué es y para qué sirve?
El design system es el reglamento visual del club aplicado a lo digital: los colores exactos, las letras, los espacios y las piezas reutilizables (botones, tarjetas, etiquetas) con las que se construirá cada página del mapa. Se define una vez y todas las pantallas lo respetan — así la tienda se ve siempre "de la U", la haga quien la haga.
Todo lo que ves en esta sección sale del design system entregado por el club (carpeta design-system/): no inventamos estilos. Nota: la tipografía de cuerpo (PP Formula) es una fuente comercial del club; en este documento se muestra con una fuente sustituta, pero en la tienda real se usarán los archivos oficiales.
Colores
Base de crema y granate con mucha área clara. El negro entra solo como acento. Los secundarios se dosifican: rojo para urgencia, dorado para prestigio/centenario, gris para metadatos.
PRIMARIOS
SECUNDARIOS (DOSIFICADOS)
ESCALAS DE APOYO
Tipografía
Big Shoulders Display para titulares y cifras — siempre en MAYÚSCULAS, apilado ajustado. PP Formula para cuerpos de texto, PP Formula Narrow para etiquetas con espaciado amplio.
Cien años de garra, pasión y grandeza sostienen una identidad que se escribe en la cancha y en cada tribuna. El cuerpo de texto va en caja normal, con interlineado cómodo para lecturas largas.
Espaciado, radios y sombras
Base de 4px. Esquinas mayormente vivas (deportivas): 4px en botones y badges, 14px en tarjetas — el emblema es el único círculo perfecto. Sombras secas, sin brillos ni neón.
Espaciado (base 4px)
Radios
Sombras (secas, tinte tinta)
Movimiento
Duraciones cortas (120–360 ms), sin rebotes ni loops decorativos. Hover: el granate se oscurece. Press: se hunde 1px (atlético, sin escalado). Focus: anillo granate translúcido.
Componentes
Las piezas reutilizables del sistema. Cada plantilla del mapa se arma combinando estas piezas (la columna "Design system" de la pestaña Plantillas indica cuáles usa cada sección).
Button
Badge
Card
Input
Crest (emblema)
El emblema "U" oficial en sus variantes de color (oficial, granate, blanco, negro). Reglas: nunca deformarlo, rotarlo, sombrearlo ni recolorearlo. Los archivos oficiales están en design-system/assets/logos/ y se integrarán en el theme — no se reproduce aquí un sustituto.
MatchCard
Tarjeta de partido con marcador en Big Shoulders, estados EN VIVO/FINAL y fondo granate o foto con scrim. En la tienda se reutiliza para conectar campañas con el calendario deportivo (ej. banner del clásico).