Gomilovers Web · Wireframes esquemáticos (Fase 5)

W1

Home

index · arquitectura §3.1

1 · Announcement bar (marquee)NATIVO

"Delivery gratis a todo el Perú" — persistente en todo el sitio (patrón: todas las referencias)

2 · HeaderNATIVO

Logo · Nav: Gomitas ▾ (por beneficio + por producto) · Para Ella · Para Él (primeros ítems, patrón Ritual) · Promociones · Blog · Contacto — Búsqueda · Cuenta · Carrito

3 · Hero carrusel promocionalNATIVO+METAFIELD

Slides administrables por campaña (ej. "Pack Papá 40%"). Título + CTA + foto producto. Metaobjeto campania con vigencia

Slide activa: claim + CTA "Ver gomitas"

foto producto

4 · Grid "Nuestras gomitas" (4 productos)NATIVO

Card: badge estado · tagline de beneficio bajo el nombre (patrón OLLY) · precio · add-to-cart · fav

Gomi Balance
"Activa tu metabolismo"

Gomi Dreams
"Para dormir mejor"

Energy Ella
"Energía femenina"

Energy Él
"Energía y vitalidad"

5 · ★ Entrada dual "Para Ella / Para Él"NATIVO

Requisito del cliente: entrada directa a los 2 winners → directo a cada PDP [DECISIÓN #1]. Sección propia, 50/50

PARA ELLA
(línea roja) → PDP

PARA ÉL
(línea azul) → PDP

6 · Sellos de confianza (6)NATIVO

Sin azúcar · GMO free · sin gluten · sin lactosa · BPM · HACCP — como badges visuales (patrón SugarBear), mismos del mockup

7 · Producto destacado (mini-PDP)NATIVO

1 producto elegible con beneficios-tile + add-to-cart directo (estructura del mockup del cliente)

galería

título · rating · precio · tiles · CTA

8 · Tiles por beneficio (3 + promociones)NATIVO

Activa tu metabolismo · Descanso y relajación · Energía y líbido · Promociones → PLPs (fotos lifestyle como el mockup)

Metabolismo

Descanso

Energía

Promos

9 · Bloque educativo (4 artículos del blog)NATIVO

"¿Qué son los suplementos funcionales?" etc. — cada artículo enlaza su producto (SEO + objeciones)

10 · "Nos encuentras en" (marketplaces)NATIVO

Falabella · Mercado Libre · Rappi · Ripley (social proof de canal, del mockup)

11 · Banner de marcaNATIVO

Manifiesto (foto producto + copy corto). Tono serio-cercano, beneficio protagonista

12 · Newsletter + métodos de pago + footerNATIVO+APP

Boletín 10% off (→Klaviyo) · Visa/MC/Amex/Diners/Yape/Plin (Izipay) · nav footer: Sobre · Políticas · Ayuda · Libro de Reclamaciones · WhatsApp · redes

Estructura = mockup del cliente, con 2 upgrades del benchmark: taglines de beneficio en cards (OLLY) y la sección dual Ella/Él (Ritual + requisito del cliente). En móvil las secciones apilan 1 columna; grid de productos 2×2.

W2

PLP — Colección por beneficio

collection · §3.3 · ej. /collections/descanso-y-relajacion

1 · Hero del beneficioNATIVO+METAFIELD

Gradiente de la línea + titular del beneficio protagonista + copy editorial de 2 líneas ("mundo del beneficio", patrón OLLY)

2 · Grid de productos de la colecciónNATIVO

1-2 productos hoy (los 4 futuros entran solos). Card = misma del home. Badges nuevo/oferta/agotado. Sin filtros: colección corta y curada

Producto A

Producto B (si aplica)

(espacio para futuros)

3 · Strip educativo del beneficioMETAFIELD

Cómo funciona el ingrediente clave + link al artículo del blog — llena la colección corta de contenido

4 · Cross-link a los otros beneficiosNATIVO

Tiles chicos: "¿Buscabas otra cosa?" → metabolismo / descanso / energía (patrón tabs de Ritual)

En Energía y líbido el grid muestra Ella y Él lado a lado con módulo de cruce (ver W4-7).

W3

PLP — Promociones / "Compra más, ahorra más"

collection.promociones · §3.3

1 · Hero comercialNATIVO

"Más Gomi, menos precio" — colección comercial del mockup convertida en escalera de valor (patrón SugarBear "Buy More & Save")

2 · Packs con nombre propioCUSTOM/APP · DECISIÓN #2 y #6

Ancla tachada visible (patrón Goli/Gummy Life)

Pack x2 mismo Gomi
(2 meses, −X%)

★ Pack Pareja
Ella + Él (−X%)

Pack 24/7
Energy + Dreams (patrón Yumi Gumi)

Trío Bienestar
Balance+Dreams+Energy

3 · Promos de campaña vigentesMETAFIELD

Lo que el hero del home anuncia (ej. Pack Papá) vive acá con su vigencia

W4

PDP — Página de producto ★ (la plantilla más importante)

product · §3.2 · 4 instancias tematizadas por metafields

1 · Breadcrumb + categoría-beneficioNATIVO+METAFIELD

"Energía y líbido" con el color de su línea

2+3 · Galería + Buy boxNATIVO+METAFIELD

Galería: fotos sobre gradiente de SU línea + miniaturas

Título · rating · precio S/ 99 · "60 gomitas = 30 días" (patrón Gummy Life) · beneficios-tile (máx 4) · stepper · CTA · sellos

4 · Upsell de cantidadCUSTOM/APP · DECISIÓN #2

x1 S/99 · x2 −X% · x3 −X% con ancla tachada (patrón más repetido del benchmark: Goli/Lemme/Gummy Life/SugarBear)

5 · Descripción / Ingredientes / Modo de uso (acordeón)METAFIELD

Ingrediente clave con dosis y verbos de soporte ("ayuda a…", nunca curas) + qué NO contiene (patrón Goli/Lemme)

6 · ★ Cross-sell "Combínalo con"METAFIELD

REGLA DEL CLIENTE: en Ella → Él (y viceversa, recíproco SIEMPRE). En Balance/Dreams → winner afín + entre sí. Editable sin código

Producto cruzado (mini-card + add)

CTA pack pareja / pack 24/7 (upsell del cruce)

7 · Bloque educativo "cómo funciona"METAFIELD

Maca negra / maca roja+aguaje / melatonina+valeriana / vinagre de manzana — explicado simple (patrón OLLY "How It Works")

8 · FAQ del producto (6-9 preguntas)METAFIELD

¿Es seguro? ¿Cuándo veo resultados? ¿DIGESA/HACCP? — dentro de la PDP (patrón Yumi Gumi/Gummy Life)

9 · ReviewsAPP · DECISIÓN #3

Estrellas + reseñas con foto + desglose

10 · Productos relacionados (resto del catálogo)NATIVO

11 · CTA sticky móvilNATIVO

Barra fija: precio + "Agregar al carrito"

Toda la PDP se tiñe con el color de línea del producto (patrón Lemme — valida el DS): verde Balance · morado Dreams · rojo Ella · azul Él.

W5

Carrito (drawer)

cart drawer + /cart fallback · §3.4

1 · Header del drawerNATIVO

"Tu carrito" + cerrar

2 · Progreso de incentivoNATIVO · DECISIÓN #4

Si envío es gratis siempre → barra hacia el REGALO/descuento del pack ("te falta 1 Gomi para −15%"), no hacia envío

3 · Líneas de productoNATIVO

Mini-card + stepper + eliminar. Estado vacío: ícono carrito + CTA "Seguir comprando"

4 · Cross-sell de 1 ítemCUSTOM

Si hay Ella y no Él → sugerir Él (regla del cliente). Máximo 1 sugerencia

5 · Total + CTA checkoutNATIVO

→ checkout nativo Shopify (Izipay: tarjetas/Yape/Plin)

W6

Blog (listado)

blog · /blogs/bienestar · §3.4

1 · Header del blog + filtro por beneficioNATIVO

2 · Grid de artículosNATIVO

Card: imagen + título + resumen + "Leer más" (como el bloque del mockup)

Artículo

3 · CTA newsletterNATIVO+APP

W7

Artículo

article · §3.4

1 · Título + meta + imagenNATIVO

2 · Cuerpo del artículoNATIVO

Claims cuidados (educación, no promesas)

3 · ★ CTA al producto relacionadoMETAFIELD

Card del Gomi del que habla el artículo + add-to-cart (cierra el loop SEO→venta, flujo 4)

4 · Artículos relacionadosNATIVO

W8

Nosotros

page.nosotros · §3.4

1 · Hero institucionalNATIVO

"Somos una marca peruana…" (banner de marca del mockup, versión extendida)

2 · Historia / propósitoNATIVO

3 · Calidad y certificacionesNATIVO

HACCP · BPM · sellos — con explicación de cada uno (patrón transparencia Ritual/Goli)

4 · CTA a productosNATIVO

W9

Preguntas frecuentes

page.faq · §3.4 · metaobjeto faq

1 · Buscador simple + tabs por temaNATIVO

Producto · Envíos · Pagos (Yape/Plin/cuotas) · Cambios y devoluciones · Regulatorio (DIGESA/HACCP, patrón Gummy Life)

2 · Acordeones por temaMETAFIELD

3 · "¿No resolviste?" → WhatsAppNATIVO

Flujo 6 de postventa

W10

Contacto

page.contact · §3.4

1 · Form nativo + botón WhatsAppNATIVO

Nombre, email, asunto, mensaje. WhatsApp wa.me como canal preferente (patrón Yumi Gumi — en Perú cierra ventas)

2 · Datos de la empresa + links legalesNATIVO

W11

Libro de Reclamaciones

page.libro-de-reclamaciones · §3.4 · CUSTOM legal

1 · Encabezado legal INDECOPICUSTOM

Razón social, RUC, dirección — datos pendientes del cliente (solicitud)

2 · Formulario normadoCUSTOM/APP

Reclamo/queja · datos del consumidor · detalle · correlativo automático · copia por email al consumidor y a la empresa

Obligatorio por ley peruana. Además funciona como señal de confianza (badge en footer, patrón Yumi Gumi).

W12

Búsqueda / sin resultados / 404

search + 404 · §3.4

1 · Resultados de búsquedaNATIVO

Grid estándar; con 4 SKUs casi todo cae en "sin resultados" → estado clave

2 · Sin resultados / 404NATIVO

Mensaje de marca + sugerencias ("balance", "sueño", "energía") + grid de los 4 productos (recuperación, nunca callejón sin salida)

W13

Cuenta (nativa Shopify)

customers/* · §3.4

1 · Login / registro / recuperarNATIVO

Plantillas nativas con branding básico (logo/tipografía) — sin desarrollo custom

2 · Pedidos + direccionesNATIVO

El checkout NO se wireframea: es el nativo de Shopify (customizarlo = plan Plus). Solo branding básico.

Gomilovers Web — Wireframes esquemáticos

Home

PLP — Colección por beneficio

PLP — Promociones / "Compra más, ahorra más"

PDP — Página de producto ★ (la plantilla más importante)

Carrito (drawer)

Blog (listado)

Artículo

Nosotros

Preguntas frecuentes

Contacto

Libro de Reclamaciones

Búsqueda / sin resultados / 404

Cuenta (nativa Shopify)