# Arquitectura de información — Gomilovers Web (Shopify custom)

> **Documento maestro del proyecto.** Define QUÉ se construye antes de discutir cómo se ve.
> Fase 2 de [WORKFLOWS.md](../WORKFLOWS.md). Base: catálogo real (4 SKUs a S/ 99.00), mockup del
> home del cliente (07-07-2026), design system v1.1.3 y decisiones registradas en [NOTAS.md](../NOTAS.md).

---

## 1. Convenciones del documento

Cada bloque se clasifica por **tipo de implementación** (esto convierte la arquitectura en presupuesto):

| Etiqueta | Significado | Costo |
|---|---|---|
| `[NATIVO]` | Sección/feature del theme Online Store 2.0 (Liquid + JSON templates) | Incluido en el build |
| `[METAFIELD]` | Dato estructurado en metafields/metaobjects, editable por el cliente sin tocar código | Incluido (setup una vez) |
| `[APP]` | App de terceros del App Store (posible fee mensual) | Fee mensual + integración |
| `[CUSTOM]` | Desarrollo a medida (secciones JS, lógica propia) | Horas de desarrollo |
| `[PLUS]` | Solo disponible en plan Shopify Plus (checkout custom, scripts) | ⚠️ Evitar — asumimos plan estándar |
| `[DECISIÓN #n]` | El cliente debe decidir — ver §7 | — |

**Alcance:** catálogo actual de 4 productos. Los 4 productos futuros están **fuera de alcance**, pero la
estructura (colecciones por beneficio + metafields) los absorbe sin rediseño.

---

## 2. Sitemap jerárquico

```
gomilovers.com
├── /                                        → plantilla HOME
├── Productos
│   ├── /products/gomi-balance               → PDP (Activa tu metabolismo · verde #3E805C)
│   ├── /products/gomi-dreams                → PDP (Descanso y relajación · morado #91334E)
│   ├── /products/gomi-energy-para-ella      → PDP (Energía y líbido · rojo #E84755) ★ winner
│   └── /products/gomi-energy-para-el        → PDP (Energía y líbido · azul #4171AF) ★ winner
├── Colecciones (por beneficio — taxonomía confirmada por el cliente)
│   ├── /collections/todas                   → PLP general "Nuestras gomitas"
│   ├── /collections/activa-tu-metabolismo   → PLP beneficio
│   ├── /collections/descanso-y-relajacion   → PLP beneficio
│   ├── /collections/energia-y-libido        → PLP beneficio (Ella + Él)
│   └── /collections/promociones             → PLP comercial (packs/ofertas)
├── Contenido
│   ├── /blogs/bienestar                     → BLOG listado
│   └── /blogs/bienestar/<articulo>          → ARTÍCULO (cada uno enlaza su producto)
├── Institucional
│   ├── /pages/nosotros                      → NOSOTROS (historia, calidad, HACCP)
│   ├── /pages/preguntas-frecuentes          → FAQ
│   ├── /pages/contacto                      → CONTACTO (form + WhatsApp)
│   └── /pages/libro-de-reclamaciones        → LIBRO DE RECLAMACIONES [CUSTOM · legal Perú]
├── Legal (nativas de Shopify)
│   ├── /policies/privacy-policy · /refund-policy · /shipping-policy · /terms-of-service
├── Compra
│   ├── Carrito: drawer global + /cart (fallback)
│   ├── /checkout                            → checkout nativo Shopify (no se customiza [PLUS])
│   └── /account (+ login/registro/pedidos)  → CUENTA nativa
└── Sistema
    ├── /search                              → BÚSQUEDA + sin-resultados
    └── /404                                 → error con recuperación (grid de productos)
```

**[DECISIÓN #1] Entrada "Para Ella / Para Él":** los winners tienen **entrada directa desde el home**
(sección dual dedicada) que lleva **directo a cada PDP** — no creamos landings intermedias
(`/pages/para-ella`) porque con 1 producto por persona la landing solo agrega un clic. Si a futuro
hay más SKUs por persona, la entrada apunta a una colección filtrada. *Recomendado: directo a PDP.*

---

## 3. Inventario de plantillas

### 3.1 HOME (`index`) — estructura validada por el mockup del cliente, contenido con catálogo real

| # | Sección | Contenido | Implementación | Fuente de datos |
|---|---|---|---|---|
| 1 | Announcement bar | Delivery gratis a todo el Perú (marquee) | `[NATIVO]` | Setting del theme |
| 2 | Header | Logo, nav (Inicio · Gomitas · Promociones · Blog · Contacto), búsqueda, cuenta, carrito | `[NATIVO]` | Menú de navegación |
| 3 | Hero carrusel | Promos de campaña (ej. Pack Papá 40%) — slides administrables | `[NATIVO]` | Metaobjeto `campania` `[METAFIELD]` |
| 4 | Grid "Nuestras gomitas" | 4 product cards (badge, categoría-beneficio, precio, add-to-cart) | `[NATIVO]` | Colección `todas` |
| 5 | **Entrada Para Ella / Para Él** ★ | Sección dual (rojo/azul) → directo a cada PDP | `[NATIVO]` | Links fijos + metafields de color |
| 6 | Sellos de confianza | Sin azúcar · GMO free · sin gluten · sin lactosa · BPM · HACCP | `[NATIVO]` | Bloques del theme (vectores DS) |
| 7 | Producto destacado (mini-PDP) | 1 producto con beneficios + add-to-cart directo | `[NATIVO]` | Product picker del theme |
| 8 | Tiles por beneficio | 3 tiles (metabolismo/descanso/energía) + 1 promociones → PLPs | `[NATIVO]` | Colecciones |
| 9 | Bloque educativo | 4 artículos del blog (¿qué son los suplementos funcionales?, etc.) | `[NATIVO]` | Blog `bienestar` |
| 10 | Logos marketplaces | Falabella · Mercado Libre · Rappi · Ripley ("nos encuentras en") | `[NATIVO]` | Bloques de imagen |
| 11 | Banner de marca | Manifiesto Gomilovers (foto producto + copy) | `[NATIVO]` | Setting |
| 12 | Métodos de pago + newsletter + footer | Visa/MC/Amex/Diners/Yape/Plin (Izipay) · boletín (→Klaviyo) · nav footer | `[NATIVO]` + Klaviyo `[APP]` | Settings + Klaviyo |

### 3.2 PDP (`product`) — la plantilla más importante; 4 instancias tematizadas por metafields

| # | Módulo | Contenido | Implementación |
|---|---|---|---|
| 1 | Breadcrumb + categoría-beneficio | "Energía y líbido" (color de línea) | `[NATIVO]` + `[METAFIELD]` |
| 2 | Galería | Fotos producto (fondo gradiente de su línea) + miniaturas | `[NATIVO]` |
| 3 | Buy box | Título, rating, precio S/, beneficios-tile, stepper, CTA, sellos | `[NATIVO]` + `[METAFIELD]` |
| 4 | **Upsell de cantidad** | Pack x1 / x2 (-10%) / x3 (-15%) — [DECISIÓN #2: % reales] | `[CUSTOM]` o `[APP]` (ver §5.4) |
| 5 | Descripción / Ingredientes / Modo de uso | Acordeón — claims cuidados (sin promesas médicas) | `[METAFIELD]` |
| 6 | **Cross-sell "Combínalo con"** ★ | Ella↔Él SIEMPRE recíproco; Balance↔Dreams complementarios | `[METAFIELD]` (referencia a producto) |
| 7 | Bloque educativo del beneficio | Cómo funciona el ingrediente clave (maca, melatonina, ACV) | `[METAFIELD]` |
| 8 | Reviews | Estrellas + reseñas con fotos | `[APP]` (Judge.me o similar — [DECISIÓN #3]) |
| 9 | Productos relacionados | Resto del catálogo | `[NATIVO]` |
| 10 | CTA sticky móvil | Barra fija precio + agregar | `[NATIVO]` |

**Regla de cross-sell (del cliente, 07-07-2026):** en PDP de **Para Ella** el cross-sell principal es
**Para Él** (y viceversa) — son los winners y se venden en pareja. En Balance y Dreams, cross-sell
al winner afín + entre sí. Todo editable por metafield, sin tocar código.

### 3.3 PLP (`collection`) — por beneficio

1. Hero de beneficio: gradiente de la línea + titular del beneficio (protagonista, según DS) `[NATIVO+METAFIELD]`
2. Grid de productos con badges (nuevo/oferta/agotado) `[NATIVO]`
3. Strip educativo del beneficio (copy + link a artículo del blog) `[METAFIELD]`
4. Cross-link a los otros beneficios `[NATIVO]`

### 3.4 Resto de plantillas

| Plantilla | Secciones clave | Implementación |
|---|---|---|
| Carrito (drawer) | Líneas + stepper, progreso envío gratis [DECISIÓN #4: umbral], cross-sell 1 ítem, CTA checkout | `[NATIVO]` + `[CUSTOM]` cross-sell |
| Blog / Artículo | Listado con categorías por beneficio; artículo con CTA al producto relacionado | `[NATIVO]` + `[METAFIELD]` producto_relacionado |
| Nosotros | Historia, planta/calidad, certificaciones HACCP/BPM, equipo | `[NATIVO]` |
| FAQ | Acordeones por tema (producto, envíos, pagos, devoluciones) | `[NATIVO]` (metaobjeto `faq`) |
| Contacto | Form nativo + botón WhatsApp + datos legales | `[NATIVO]` |
| Libro de Reclamaciones | Form conforme normativa INDECOPI + correlativo + copia por email | `[CUSTOM]` o `[APP]` — legal, no opcional |
| Cuenta | Login/registro/pedidos nativos de Shopify | `[NATIVO]` |
| 404 / sin resultados | Mensaje de marca + grid de productos (recuperación) | `[NATIVO]` |
| Checkout | **Nativo Shopify sin customizar** (custom = [PLUS]) — branding básico (logo/color) sí | `[NATIVO]` |

---

## 4. Modelo de datos (metafields / metaobjects)

**Metaobjeto `beneficio`** (3 entradas): nombre, slug, gradiente (token DS), color, copy corto, artículo relacionado.

**Metafields de producto:**

| Namespace.key | Tipo | Uso |
|---|---|---|
| `gomi.beneficio` | referencia a metaobjeto | Categoría-beneficio (pinta PDP/PLP con su línea) |
| `gomi.color_linea` | texto (token) | `--g-verde` / `--g-vino` / `--g-coral` / `--g-azul` |
| `gomi.ingrediente_clave` | texto | Vinagre de manzana / melatonina+valeriana+manzanilla / maca roja+aguaje / maca negra |
| `gomi.beneficios_tiles` | lista de texto | Tiles del buy box (máx 4) |
| `gomi.modo_uso` | texto enriquecido | "2 gomitas al día…" |
| `gomi.cross_sell` | referencia a producto | Regla Ella↔Él / afinidad |
| `gomi.upsell_packs` | JSON | Definición x2/x3 y descuentos |
| `gomi.educativo` | texto enriquecido + imagen | Bloque "cómo funciona" |
| `gomi.claims_ok` | texto | Claims aprobados legalmente (fuente de verdad del copy) |

**Metaobjetos adicionales:** `campania` (slides del hero con vigencia), `faq` (pregunta/respuesta/tema), `sello` (icono+nombre).

> Con esto, **lanzar los 4 productos futuros = cargar productos + llenar metafields**. Cero código.

---

## 5. Integraciones (con riesgos declarados por escrito)

### 5.1 Pagos — Izipay ⚠️ RIESGO A VALIDAR ANTES DE PROMETER
- El mockup muestra Visa/MC/Amex/Diners/**Yape/Plin "powered by Izipay"**. En Shopify Perú **no existe
  Shopify Payments**: se usa gateway de terceros. **Validar en fase temprana**: ¿la tienda actual ya
  tiene Izipay funcionando como gateway? ¿soporta Yape/Plin dentro del checkout de Shopify (no solo
  link de pago)? Alternativas si falla: Mercado Pago Perú / Culqi / Niubiz. **Es el ítem #1 de la
  fase 7** (lo de mayor incertidumbre de plazos).
- Cuotas sin interés: depende del emisor/gateway — **no prometer en el sitio** hasta confirmar.

### 5.2 Envíos
- "Delivery gratis a todo el Perú" (announcement + PDP). [DECISIÓN #4] ¿gratis SIEMPRE o desde umbral
  (ej. S/ 120)? Impacta el módulo de progreso del carrito. Configuración: perfiles de envío nativos.
- Courier (Olva/Urbano/Chazki/propio): definir con el cliente + si hay tracking → app o manual.

### 5.3 Facturación electrónica (SUNAT)
- Boleta/factura electrónica: `[APP]` del App Store peruano (ej. apps de facturación SUNAT) o
  integración con el facturador actual del cliente. **Preguntar qué usan hoy** (ítem de la solicitud).

### 5.4 Upsell/bundles (packs x2/x3)
- Opción A `[CUSTOM]`: variantes de pack o descuentos automáticos por cantidad (Shopify Functions /
  descuentos nativos "compra X ahorra Y") — sin fee mensual. *Recomendada para 4 SKUs.*
- Opción B `[APP]`: app de bundles (fee mensual, más features). [DECISIÓN #2]

### 5.5 Marketing y analítica (ya operando — no romper)
- **Klaviyo** `[APP]` — boletín del footer + flows existentes (cuenta activa del workspace).
- **Meta Pixel + Conversions API** — la pauta ya corre (cuenta act_496085842923041): migrar píxel al
  theme nuevo ANTES del go-live y verificar eventos (PageView/ViewContent/AddToCart/Purchase).
- **Microsoft Clarity** — reinstalar snippet en el theme nuevo.
- **Google Analytics 4** — confirmar si existe propiedad.

### 5.6 Soporte
- WhatsApp (botón flotante + link en contacto) `[NATIVO]` (link wa.me) — número a confirmar.

---

## 6. Voz y componentes

- **Tono:** cercano y confiable, bienestar adulto, **no infantil** (regla del cliente). Claims de
  bienestar, jamás promesas médicas (nutracéutico, normativa DIGESA/INDECOPI).
- **CTAs:** "Agregar al carrito", "Ver gomitas", "Quiero mi 10%" (newsletter), "Combínalo con".
- **Componentes:** todos existen en el design system v1.1.3 (`../design-system/demo.html`): botones
  píldora, product card, badges, stepper, drawer, toast, newsletter, progress envío, acordeones.
  El theme consume los **mismos tokens CSS** (§FASE 7: tokens → código primero).

---

## 7. Decisiones abiertas para el cliente (numeradas — no se deciden por él)

1. **Entrada Para Ella/Para Él:** ¿directo a PDP (recomendado) o landing intermedia?
2. **Packs/upsell:** ¿x2/x3 con qué descuentos reales? ¿variante custom (sin fee) o app de bundles?
3. **App de reviews:** Judge.me (recomendada, plan free) vs Loox (fotos, fee) — ¿hay reseñas que migrar?
4. **Envío gratis:** ¿siempre (como dice el announcement) o desde umbral S/ X? Define el módulo del carrito.
5. **Suscripción** (compra recurrente con descuento): los referentes DTC la usan como AOV driver —
   ¿fase 2 o descartada?
6. **Promociones** como colección comercial: confirmar mecánica (¿packs? ¿descuentos por campaña?).

---

*Actualizado 07-07-2026 · El detalle de patrones de referencia vive en [investigacion.md](investigacion.md) (fase 1).*