Tienda Crema

Arquitectura de información · Shopify OS 2.0
Fase 2 · Estructura

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.

1Cada caja grande es una zona de la tienda — lo que el hincha verá como opción en el menú (Camisetas, Retro, Ofertas…).
2Haz clic en una caja para abrirla y ver las páginas que contiene, con su nombre y, en gris, su dirección web técnica.
3La etiqueta rosada indica el "molde" de Shopify con el que se construye esa página. El detalle de qué bloques lleva cada molde está en la pestaña Plantillas.

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.
Metafield
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).
Fase 2 · Detalle modular

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.

Implementación:Nativo themeMetafieldAppCustom/LiquidPlus only
Fase 2 · Navegación

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).

Fase 3 · Integración ERP

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"| SAP

1. 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 ↔ variantId

2. 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.

Fase 1 · Investigación

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óduloMilan
Shopify
River
VTEX
PSG
Fanatics
R. Madrid
Shopify
Barça
Shopify
Boca
VTEX
I. Miami
Fanatics
Tienda Crema
Announcement bar111141
Header + buscador + carrito22211222
Hero de campaña434 vídeo32353
Kit comprable (carrusel)545374
Personalizador en home8 widget8 widget6 banner6 widget1+3 hero5 ★
Shop by player (grid)menúmenú46footer6
Colecciones destacadas / colabs75takeover75758
Banner retro9menúmenú59
Tiles por audiencia (H/M/N)6hero6610
Best sellers / tendencia11 UGC958477
Fila de beneficios / trust79811
Editorial / blog / SEO12-131077912
Newsletter con incentivofooter11−15%footerfooter−10%−10%13 · −10%
Footer completo141212119101014

Capacidades clave

CapacidadMilanRiverPSGR.M.BarçaBocaI.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✔ + statscampañas✔ facetado✔ menú✔ col.+filtro✔ metaobject + tag
Retro como línea permanente✔ 24 ítems✔ Héritagechico✔ 37 ítems1 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 localKlarnacuotas ARMP+MODOBNPL ×3MP·Niubiz·Yape·Plin
Precio socio / membresíaRewardsRIVER IDMyParisPlatinumPenyafase 2: Socio Crema
Reviews / UGCPhotoslurpno en fase 1
Cumplimiento legal local visibleOmnibus UEBot. arrep.Bot. arrep.Libro de Reclamaciones

10 patrones que adoptamos

01

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.

02

Home canónica de club

Announcement → hero kit → kit comprable → personaliza → jugadores → colecciones → retro → trust → newsletter. Orden convergente en las 7 referencias.

03

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.

04

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.

05

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.

06

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.

07

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.

08

El carrito vende

Drawer con barra de envío gratis (Milan/Barça) + cross-sell de bajo ticket + aviso de plazos de personalizados.

09

Socio como capa de pricing

RIVER ID, Platinum, Penya. Fase 2: "Socio Crema" con tags de cliente, descuento automático y preventas exclusivas.

10

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.

Fase 1 · Evidencia

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).

Independencia operativa

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.

Prioridades:Bloqueantesin esto no se lanzaIdealmejora el lanzamientoFase 2para después
Estados:Recibido ✓DefinidoPor coordinarsin marca = pendiente de entrega
Fuente de verdad visual

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

Crema
#FFFEF4
superficie base
Granate
#A6192E
color de marca
Negro
#000000
acento, nunca dominante

SECUNDARIOS (DOSIFICADOS)

Rojo
#DA291C
energía, urgencia, ofertas
Dorado
#C6AA76
prestigio, centenario, ediciones limitadas
Gris
#A7A8A9
metadatos, líneas tenues
Granate oscuro
#7C2629
profundidad, estados press

ESCALAS DE APOYO

Crema 100
#FBF8EA
superficies hundidas
Crema 200
#F2ECD8
bordes suaves
Granate 100
#F1D4D9
fondos de etiqueta
Granate 300
#D17F8B
apoyos
Granate 900
#4A1518
fondos profundos
Tinta 700
#3A2A2C
texto sobre crema
Tinta 900
#1A1213
titulares oscuros

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.

Big Shoulders Display · titulares y cifras · MAYÚSCULAS
LA GARRA DEL ÚNICO GRANDE
DESDE 1924 · CAMPEÓN 2024
PP Formula Narrow · etiquetas y antetítulos (tracking amplio)
LIGA 1 · FECHA 15 · ESTADIO MONUMENTAL
PP Formula · cuerpo de texto (mostrada con fuente sustituta)

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.

Escala tipográfica (base 16px · ajustada por feedback del cliente)
64 TITULAR HERO
48 TITULAR DE SECCIÓN GRANDE
40 TITULAR DE SECCIÓN COMPACTO
32 SUBTÍTULO
24 TARJETA
16 — cuerpo base
14 — metadatos y notas

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)

--space-1 a --space-10
4
8
12
16
24
32
48
64

Radios

esquinas vivas y deportivas
0
4px
8px
14px
50%

Sombras (secas, tinte tinta)

sin glows ni brillos — regla de marca
sm
md
lg

Movimiento

transiciones secas y atléticas

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

5 variantes · 3 tamaños · CTAs en mayúsculas

Badge

estados, categorías y metadatos
Nuevo Personalizable Edición limitada -30% Agotado En vivo

Card

4 variantes de contenedor
Default
Granate
Ink
Sunken

Input

foco granate · validación inline

Crest (emblema)

componente de marca

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

pieza de partido (previa / en vivo / final)

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).

Reglas de marca que la tienda respeta

VozÉpica, orgullosa, combativa: "la U", "los cremas", el nosotros del club y la hinchada. CTAs imperativos: COMPRA TU ENTRADA, VIVE EL CLÁSICO. Sin emojis — la energía la ponen la tipografía, el color y la foto.
FotografíaCálida y aguerrida (luz de estadio, bengalas, dorados). Categorías: jugadores, hinchada, partidos. Texto sobre foto siempre con scrim degradado, nunca cápsulas que tapen la imagen.
FondosTres modos: crema plano con aire (institucional), granate sólido o con textura, y fotografía a sangre con scrim. El motivo "garra" (zarpazos) se reserva para piezas de máxima intensidad. Sin degradados azulados ni morados.
LayoutSistema modular: margen = ancho ÷ 24, grilla de 10 columnas. El logo siempre arriba a la izquierda (~10% de alto). Sponsors siempre abajo (~10%).
IconografíaNo hay set propio: se recomienda Lucide (trazo limpio) en granate o tinta — pendiente de confirmar con el club (ver NOTAS.md). El emblema y la tipografía cargan la identidad.
Lo que falta definirComponentes de ecommerce (card de producto, selector de tallas, filtros) no existen aún en el design system: se derivarán de Button/Badge/Card/Input en la fase de diseño visual y se registrarán como extensión del sistema.