Fases 1–5v1 · 07/07/2026

DEL MAR SURF — Ecommerce

Investigación · Arquitectura · Flujos · Solicitud de información · Wireframes — preparado por EQAPLA

Dónde estamos y qué sigue

La tienda de Del Mar Surf se construye en 9 fases. Este documento reúne las fases 1 a 5 para revisarlas juntas: primero se aprueba la estructura (aquí, donde los cambios cuestan poco) y recién después se diseña y se programa.

FASE 0
Setup
✓ Repo del proyecto creado (acceso del cliente garantizado)
FASE 1
Benchmark
✓ 8 referencias auditadas
FASE 2
Arquitectura
✓ 11 plantillas + integraciones
FASE 3
Flujos
✓ 6 flujos clave
FASE 4
Solicitud
● 29 ítems — en cancha del cliente
FASE 5
Wireframes
● 11 bocetos — para validar en esta reunión

La visión (kickoff 02/07)

Decisiones que necesitamos del cliente

#DecisiónContexto
1B2C directo vs. marketplace desde el día 1Quedó del kickoff — el benchmark (pestaña 1) da elementos para decidir
2Pasarela de pagosMercado Pago vs. Culqi vs. Izipay — EQAPLA trae comparativa; define cuotas y Yape
3Dominiodelmarsurf.pe / .com — comprar ya si no existe
4Cobertura de envíosLima primero vs. nacional desde el día 1
5Registro Indecopi⚠ Urgente — la marca aún no está registrada (S/990 con la empresa aliada)

Fase 1 — Benchmark de referencias

Auditamos las tiendas que salieron en el kickoff (Maui, Billabong, Surf Place, Feeling Board, Todo Surf) más referencias internacionales (Rip Curl, Quiksilver, Cleanline Surf). Cada decisión de estructura de esta presentación sale de lo que estas tiendas hacen — no de gustos. El detalle completo vive en investigacion.md del repo.

El hallazgo del hero (lo que vimos en el kickoff, verificado): lo que hace que Billabong "convierta mejor" que Maui no es un banner con productos al costado — es el combo apilado: barra de 4 beneficios arriba de todo ("3 cuotas sin intereses · envío gratis · cambios sin costo · compra segura") + carrusel + estantería de productos comprables inmediatamente debajo, con tallas visibles y compra rápida. El hero de Maui es un carrusel puro: bonito, pero solo branding. Ese combo es el patrón W1 de los wireframes.

Las 8 referencias auditadas

Maui and Sons 🇵🇪 Magento 2

  • Referencia del cliente: carrusel rotativo (autoplay 5s) — sin producto ni beneficios dentro del hero.
  • Multi-marca real: venden Globe y Rusty con filtro por marca en el listado.
  • Guía de tallas como tabla integrada en el producto · hasta 3 cuotas sin intereses (BCP, BBVA, Interbank, Diners).
  • Newsletter sin incentivo — oportunidad, no patrón a copiar.

Billabong 🇵🇪 VTEX

  • La referencia de conversión: beneficios arriba + carrusel + shelf comprable debajo.
  • Tallas visibles y "quickview" en las cards del listado — compra sin salir de la lista.
  • Yape integrado en el checkout · medidor de envío gratis en el carrito.
  • PDP completa: doble CTA, reviews, preguntas y respuestas, guía de tallas.

Surf Place (Punta Hermosa) 🇵🇪 WooCommerce

  • Visión №1 de Andrés. Su motor de tráfico: +30 cámaras de olas en vivo + noticias — el surfista entra todos los días.
  • Su "marketplace" real es C2C de usados: 823 productos publicados por usuarios.
  • Yape por QR manual (captura como comprobante, tope S/500/día) — confirma que Yape debe entrar vía pasarela.
  • Puntos + membresía de ahorro · stock por sede visible en cada producto.

Feeling Board 🇵🇪 WooCommerce

  • Visión №2. No es marketplace de vendedores: es importador/retailer curado (15+ marcas de tablas).
  • La marca tercera como navegación: grid de logos en home + marcas en el menú + filtro por marca.
  • Separa ropa propia del hardware de marcas → cero canibalización por diseño.
  • Outlet permanente con precio tachado · puntos Feelingboard · surfcams.

Todo Surf (Miraflores) 🇵🇪 WooCommerce

  • Multi-marca con páginas por marca — incluida la propia como una más.
  • Hasta 12 cuotas sin intereses vía Mercado Pago… que casi no comunican. Gap directo para Del Mar.
  • WhatsApp con mensaje prellenado por producto — el cierre asistido peruano.
  • Sin guía de tallas ni en su producto propio — otro gap local.

Cleanline Surf 🇺🇸 Shopify

  • Referencia internacional multi-marca (30+ marcas) — corre sobre Shopify.
  • El patrón multi-marca más barato: colecciones categoría×marca + franja de logos clickeables.
  • Guía de tallas del fabricante embebida con toggle cm/pulgadas · tallas intermedias.
  • Su marca propia convive como un vendor más del catálogo.

Rip Curl 🌍 Shopify (Dawn)

  • Valida el stack: una marca global corre sobre tema Dawn customizado — la misma base del theme de Del Mar.
  • Lealtad como eje: envío gratis a menor monto solo para registrados (captura cuentas sin regalar %).
  • Badges de 3 estados (Nuevo / Best seller / Últimas unidades) + escasez por talla.
  • Hero estático de 1 mensaje / 1 CTA + grid de categorías inmediatamente después.

Quiksilver 🌍 Shopify

  • También Shopify. Hero carrusel narrativo mezclando foto y video por colección.
  • 15% off primera compra por email+SMS — el patrón de captura a copiar (ningún local lo ofrece).
  • Rewards con slot propio en el menú principal.

Qué adoptamos y qué descartamos

✓ Adoptar en el lanzamiento

  • Stack de hero Billabong: beneficios + carrusel + shelf comprable (→ wireframe W1)
  • Cuotas y Yape como mensaje, no solo medio de pago
  • Tallas visibles + compra rápida en las cards
  • Guía de tallas por categoría (gap de todo el mercado local)
  • Medidor de envío gratis en el carrito
  • WhatsApp prellenado por producto
  • % de primera compra por email (patrón Quiksilver)

✗ Descartar / posponer

  • Hero carrusel puro estilo Maui (solo branding, no convierte)
  • Newsletter sin incentivo
  • Mercado de usados C2C de Surf Place (sin equivalente barato en Shopify — se evalúa aparte si interesa)
  • Filtros sin normalizar (antipatrón Feeling Board)
  • Multi-marca día 1: esperar la decisión №1 — el camino técnico ya quedó definido en arquitectura (colecciones por marca, sin app de marketplace)

Comparativa de plataformas

ReferenciaPlataformaMulti-marcaHero
Maui and Sons 🇵🇪Magento 2Sí (filtro por marca)Carrusel puro
Billabong 🇵🇪VTEXNoCarrusel + shelf comprable
Surf Place 🇵🇪WooCommerceSí + usados C2CUtilitario (cámaras)
Feeling Board 🇵🇪WooCommerceSí (importador curado)Campañas de marcas
Todo Surf 🇵🇪WooCommerceSí (páginas por marca)Spotlights de marcas
Cleanline Surf 🇺🇸ShopifySí (30+ marcas)Promos por marca
Rip Curl 🌍Shopify (Dawn)NoEstático 1 CTA
Quiksilver 🌍ShopifyNoCarrusel foto+video

Los 3 internacionales corren Shopify → valida el stack elegido para Del Mar Surf. Nada de lo que hacen los locales es exclusivo de su plataforma. Billabong PE auditado vía Wayback Machine (su servidor bloquea lectura automatizada); lo no verificable quedó marcado en investigacion.md.

Fase 2 — Arquitectura de información

El mapa de QUÉ se construye. Cada bloque está clasificado: NATIVO lo trae Shopify o el theme · METAFIELD dato que se carga una vez · APP del App Store · CUSTOM desarrollo a medida · FASE 2 post-lanzamiento. Así se ve de un vistazo qué es gratis y qué cuesta.

Sitemap

delmarsurf.pe (dominio por confirmar)
│
├── Home
├── Hombre ─────────── ropa de baño · shorts · lycras · poleras y polos
├── Mujer ──────────── ropa de baño · lycras
├── Accesorios ─────── gorras · carteritas · bolso impermeable · toallones · pareos
├── Packs de playa ─── combos con ahorro (ancla del ticket promedio)
├── Novedades · Ofertas (automáticas)
├── Marcas aliadas ─── [FASE 2 · marketplace]
├── Producto (PDP) ─── estándar + variante pack
├── Buscador · Carrito · Checkout (Shopify) · Mi cuenta
├── Nosotros · Contacto/WhatsApp · Guía de tallas
└── Legales: envíos · cambios · T&C · privacidad · Libro de Reclamaciones

Inventario de plantillas (11)

#PlantillaQué resuelveImplementaciónWireframe
1HomeHero convertidor (carrusel + productos destacados + beneficios, patrón Billabong) · categorías destacadas (pedido de Andrés) · best sellers · packs · marca · captura de emailCUSTOM hero; resto NATIVOW1
2PLP genéricaColecciones hombre/mujer/accesorios con filtros talla · color · precio, badges NUEVO/OFERTANATIVO + APP gratuitaW2
3PLP packsGrid de packs con contenido visible y ahorroNATIVO + METAFIELDW3
4PDP estándarGalería · talla con guía · material/cuidados · cross-sell "completa tu pack"NATIVO + METAFIELDW4
5PDP packContenido ítem por ítem, talla POR CADA prenda, ahorro vs. sumaCUSTOMW5
6BuscadorBúsqueda predictiva + estado vacío con best sellersAPP gratuitaW6
7Carrito (drawer)Upsell "completa tu pack" + barra de envío gratisNATIVOW7
8CuentaPedidos, direcciones, loginNATIVOW8
9Páginas informativasNosotros · guía de tallas · legales · Libro de ReclamacionesNATIVO / APPW9
10404Error con buscador y best sellers (no callejón sin salida)NATIVOW10
11PLP por marca aliadaCabecera de marca + sus productosFASE 2W11

El checkout no se diseña: es el de Shopify (se configura logo, colores y campos Perú). La personalización profunda de checkout es exclusiva del plan Plus — no aplica.

Integraciones — con los riesgos declarados por escrito

IntegraciónCómoEstado / riesgo
Pagos con tarjeta + cuotasPasarela local: Mercado Pago / Culqi / IzipayDecisión №2 — EQAPLA trae comparativa
Yape / Plin⚠ No existen como gateway directo de Shopify. Entran vía la pasarela local que los incluyaRiesgo declarado: no se promete Yape nativo hasta confirmarlo con la pasarela elegida
Facturación electrónica SUNATApp local (Nubefact/Efact) conectada a ShopifyRequiere RUC del emisor (ítem 4.1)
EnvíosCourier nacional (Olva/Urbano/Chazki/Shalom), tarifas por zonaDecisión operativa (ítems 6.1–6.3)
Meta Pixel + Conversions APINativo ShopifyLa marca ya invierte en pauta Meta
WhatsAppBotón flotante con mensaje prellenado por productoPatrón validado en benchmark (Todo Surf, Surf Place)
Marketplace multi-marca3 opciones: consignación simple (recomendada) · compra de stock · app multivendorFASE 2 — depende de las condiciones que traiga Andrés
Validación del stack: el benchmark confirma que Shopify es la elección correcta — Rip Curl y Quiksilver (globales) corren sobre Shopify, y todo lo que hacen Feeling Board / Surf Place en WooCommerce es replicable con apps estándar. El único componente sin equivalente barato es el mercado de usados C2C de Surf Place (si algún día interesa, se evalúa aparte).

Fase 3 — Flujos de usuario

Los recorridos que definen el negocio, explicados para no técnicos. Los diagramas técnicos (Mermaid) viven en flujograma.md del repo.

Flujo 1 · Compra estándar — el flujo que paga todo

  1. El cliente llega por pauta de Meta, Instagram o directo.
  2. Navega por categoría (o busca directo si ya sabe qué quiere).
  3. En la lista filtra por talla, color o precio.
  4. En el producto: fotos, selector de talla con guía de tallas, material.
  5. Agrega al carrito → se abre el drawer con sugerencia "completa tu pack" y barra de envío gratis.
  6. Checkout: datos + DNI para boleta + zona de envío.
  7. Paga con tarjeta/cuotas (o Yape vía pasarela) → confirmación + email de seguimiento.

Flujo 2 · Compra de pack

  1. Entra al pack desde la home o la lista de packs.
  2. Ve el contenido ítem por ítem y el ahorro vs. comprar suelto.
  3. Elige talla por cada prenda del pack.
  4. Si una prenda no tiene su talla: sugerencia de cambio o compra individual.
  5. Al carrito → checkout estándar.

Flujo 3 · Cambio o devolución

  1. El cliente entra a "Cambios y devoluciones".
  2. Formulario o WhatsApp con su número de pedido.
  3. Se coordina recojo/cambio según la política.
  4. Si no se resuelve: Libro de Reclamaciones (obligatorio en Perú).

Flujo 4 · Consulta por WhatsApp

  1. Botón flotante en todo el sitio; desde el producto, el mensaje sale prellenado con el nombre del producto.
  2. Pre-venta: asesoría de talla/stock con link directo de vuelta al producto.
  3. Post-venta: estado de pedido y cambios.

Flujo 5 · Email → primera compra

  1. Pop-up en primera visita: descuento de bienvenida (% por definir — ítem 3.2).
  2. Deja su correo → código automático + email de bienvenida.
  3. Compra con el código en el checkout.

Flujo 6 · Alta de marca aliada FASE 2

  1. Andrés acuerda condiciones con la marca (consignación o stock mínimo).
  2. Los productos se cargan con su marca y aparecen en su página de marca.
  3. Venta por el checkout de Del Mar; liquidación mensual si es consignación.
  4. Si el modelo escala (+5 marcas), se evalúa app multivendor.

Fase 4 — Solicitud de información

Todo lo que necesitamos del cliente, en UNA sola lista — para resolverla en una única sesión de materiales y no en pedidos sueltos que frenan el cronograma. Prioridad: 🔴 bloqueante 🟡 ideal para lanzar 🟢 fase 2. También entregada en Word (solicitud-informacion.docx).

Pedido transversal: un interlocutor único por categoría (nombre + correo/WhatsApp) y una sesión de kickoff de materiales de 60 min.

1 · Marca

#Qué necesitamosEspecificaciónPrioridadEstado
1.1Logo en vectores.AI/.SVG/.EPS — positivo, negativo y sobre foto🔴⬜ pendiente
1.2Colores y tipografíasBrandbook si existe; si no, referencias del IG🔴⬜ pendiente
1.3Registro IndecopiVía empresa aliada EQAPLA: S/990 total (incl. tasa S/524), ingreso en 48h — evaluación hecha: registrable🔴🤝 por coordinar
1.4Historia de la marca3–5 párrafos o audio, para "Nosotros"🟡⬜ pendiente

2 · Productos y fotografía

#Qué necesitamosEspecificaciónPrioridadEstado
2.1Lista maestra de productosExcel: nombre, categoría, colores, curva de tallas, precio, stock🔴⬜ pendiente
2.2Fotos de productoMín. 4 por producto (frente, espalda, detalle, en uso). Si no existen: sesión de estudio EQAPLA S/700🔴🤝 por coordinar
2.3Fotos lifestyle / campañaPlaya, surf, producto en uso — para el hero🟡⬜ pendiente
2.4Descripciones / ficha técnicaMaterial, protección UV, cuidados — EQAPLA redacta la versión web🔴⬜ pendiente
2.5Guía de tallasTabla de medidas por categoría🔴⬜ pendiente
2.6Definición de packsQué packs salen al lanzamiento y contenido🟡🔵 propuesta circulada 01/07
2.7Productos en desarrolloCarteritas, bolso impermeable… para fase 2🟢⬜ pendiente

3 · Contenido y comunicación

#Qué necesitamosEspecificaciónPrioridadEstado
3.1InstagramConfirmar @delmar.surf para feed y pauta🟡⬜ pendiente
3.2Beneficio primera compra% o monto del descuento del pop-up🟡⬜ pendiente
3.3WhatsApp de atenciónNúmero + horario + quién responde🔴⬜ pendiente
3.4Tono de la marcaPalabras que usan y NO usan🟡⬜ pendiente

4 · Legal (Perú)

#Qué necesitamosEspecificaciónPrioridadEstado
4.1RUC y razón socialPara boleta/factura electrónica SUNAT🔴⬜ pendiente
4.2Política de cambiosPlazos y condiciones — EQAPLA propone borrador si no existe🔴⬜ pendiente
4.3Privacidad y T&CDatos del titular (Ley 29733)🔴⬜ pendiente
4.4Libro de ReclamacionesCorreo del responsable — la web la hace EQAPLA🔴⬜ pendiente

5 · Técnico y accesos

#Qué necesitamosEspecificaciónPrioridadEstado
5.1Dominio¿Existe delmarsurf.pe/.com? Si no: decidir y comprar🔴⬜ pendiente
5.2Cuenta ShopifyEmail del owner (plan Basic para lanzar)🔴⬜ pendiente
5.3Pasarela de pagosMP vs. Culqi vs. Izipay — EQAPLA trae comparativa; el cliente decide y abre cuenta con su RUC🔴🤝 por coordinar
5.4Meta Business ManagerAcceso para Pixel + Conversions API🟡⬜ pendiente
5.5Correo corporativoej. hola@delmarsurf.pe🟡⬜ pendiente

6 · Operación y logística

#Qué necesitamosEspecificaciónPrioridadEstado
6.1Cobertura de envíos¿Lima primero o nacional? Zonas y plazos🔴⬜ pendiente
6.2Courier¿Trabajan con alguno? Tarifas si existen🔴⬜ pendiente
6.3Punto de despachoDirección + quién empaca🔴⬜ pendiente
6.4Packaging¿Empaque de marca o genérico al lanzar?🟡⬜ pendiente
6.5Stock inicialUnidades por producto/talla para oct/nov🔴⬜ pendiente

7 · Comercial y modelo de negocio

#Qué necesitamosEspecificaciónPrioridadEstado
7.1Decisión: B2C vs. marketplace día 1¿Lanzamiento 100% producto propio o ya con marcas aliadas?🔴⬜ pendiente
7.2Marcas peruanas contactadasNombre, contacto, condiciones (consignación vs. stock) — tarea de Andrés🟢🤝 en curso
7.3Precio de envío al cliente¿Gratis desde S/X? ¿Tarifa plana?🔴⬜ pendiente
7.4Meta de lanzamientoConfirmar ventana y fecha ancla🟡🔵 oct/nov 2026

Resumen: 29 ítems · 17 bloqueantes 🔴 · 9 ideales 🟡 · 3 fase 2 🟢. Los bloqueantes de productos/fotos y legal son los de mayor lead time — conviene empezar por ahí.

Fase 5 — Wireframes esquemáticos

Un boceto por plantilla del inventario de arquitectura. Son cajas grises con etiquetas, no diseño: sin colores de marca, sin fotos, sin tipografía final — para que la conversación sea sobre la estructura (qué va, en qué orden), que es donde los cambios cuestan poco. Cada wireframe referencia su plantilla en la pestaña Arquitectura.

W1 · Home
→ Arquitectura, plantilla 1
Announcement bar — envío gratis desde S/X · cuotas
LOGO
Nav: Hombre · Mujer · Accesorios · Packs · Ofertas
Buscar · Cuenta · Carrito
HERO — carrusel de fotos de campaña
(patrón Billabong)
Producto destacado 1 + precio
Producto destacado 2 + precio
✓ cuotas · ✓ envío · ✓ 1ª compra
Categoría
Ropa de baño H
Categoría
Ropa de baño M
Categoría
Shorts
Categoría
Lycras
Categoría
Accesorios
Best sellers — carrusel de productos
PACKS DE PLAYA — bloque comercial (ahorro visible)
Bloque de marca — foto lifestyle + historia corta
CTA Nosotros
Instagram @delmar.surf (feed)
Captura de email — % primera compra
Footer — menús · legales · Libro de Reclamaciones · medios de pago · RRSS
W2 · PLP genérica (hombre / mujer / accesorios)
→ Arquitectura, plantilla 2
Header + breadcrumb
Banner de colección — foto + descripción corta
FILTROS
talla · color · precio · categoría
Orden: destacados · precio · nuevo
Card producto
badge NUEVO
Card producto
Card producto
badge OFERTA
Card producto
Card
Card
Card
Card
Paginación / cargar más
W3 · PLP packs
→ Arquitectura, plantilla 3
Intro: "Arma tu día de playa" — el beneficio del pack explicado
Card pack
contenido visible + AHORRAS S/X
Card pack
contenido visible + AHORRAS S/X
Card pack
contenido visible + AHORRAS S/X
W4 · PDP estándar
→ Arquitectura, plantilla 4
GALERÍA — 4–6 fotos
frente · espalda · detalle · en uso
thumb
thumb
thumb
thumb
Nombre + precio + cuotas
Selector talla S M L XL · guía de tallas
Swatch de color
AGREGAR AL CARRITO
WhatsApp — consulta con mensaje prellenado
Acordeones: material y cuidados · envíos · cambios
"Completa tu pack" — cross-sell del pack que contiene este producto
W5 · PDP pack (custom)
→ Arquitectura, plantilla 5
GALERÍA del pack
Nombre pack · precio pack vs. suma — AHORRAS S/X
Prenda 1 — talla [S M L XL]
Prenda 2 — talla [S M L XL]
Prenda 3 — talla [S M L XL]
AGREGAR PACK AL CARRITO
Si una prenda está agotada en tu talla → sugerencia de cambio o compra individual
W6 · Buscador
→ Arquitectura, plantilla 6
Campo de búsqueda con sugerencias predictivas (productos + colecciones)
Resultados — misma card de PLP
Estado vacío: "no encontramos X" + best sellers
W7 · Carrito (drawer)
→ Arquitectura, plantilla 7
(la página queda detrás, oscurecida)
Tu carrito (2)
Barra: te faltan S/X para envío gratis
Ítem 1 — talla · cantidad · precio
Ítem 2
Upsell: completa tu pack y ahorra
IR AL CHECKOUT
W8 · Cuenta
→ Arquitectura, plantilla 8
Menú:
pedidos · direcciones · salir
Historial de pedidos — estado · tracking · volver a comprar
W9 · Página informativa / legal
→ Arquitectura, plantilla 9
Título de página
Contenido (texto legible, anclas si es larga)
Lateral: contacto · WhatsApp · otras políticas
W10 · 404
→ Arquitectura, plantilla 10
"Esta ola no existe" — mensaje + buscador
Best sellers para no perder la visita
W11 · PLP por marca aliada FASE 2
→ Arquitectura, plantilla 11
Cabecera de marca — logo + descripción corta
Card
Card
Card
Card