Sitio público — Comercio (retail)

Audiencia: negocio Vertical: general

Objetivo

Publicar y operar la tienda en línea: catálogo, carrito, checkout (transferencia / contra entrega / PayPhone si aplica), cuenta de cliente y pedidos que llegan como nota de pedido al panel.

Quién puede hacerlo

• Configurar vitrina: personal con edición en Organización → Sitio web.
• Catálogo e inventario: permisos de productos.
• Pedidos: permisos de notas de pedido / ventas.
• Plan con entitlement storefront (Comercio o Escala).

Antes de empezar

• Vertical del tenant = general (comercio).
• Catálogo con productos/categorías publicados.
• Establecimiento (y punto de emisión si vas a facturar) configurados.
• Dominio o URL pública del negocio (sidebar Ver sitio público).
• Si necesitas un dominio propio (no el preview interno): pídelo a Dilepack; DNS + SSL suelen tardar hasta ~24 horas. Ver 19 — Sitio web y go-live plataforma.

Rutas públicas (visitante)

Pasos — Configurar la vitrina (staff)

1. Abrí Organización → Sitio web (/organization/website).
2. General (?section=general): identidad del sitio (nombre público, título SEO de la pestaña, meta descripción, favicon y logo del encabezado), fuente del sitio web (lista de tipografías del sistema o WOFF2 personalizado — distinta de Organización → Correo), estilo de encabezado (cinco layouts: clásico, franja de categorías, marketplace, compacto, barra promocional — solo comercio; la franja de categorías usa Acento 1 de la paleta), franjas (negrita con **texto** y resaltado con ==texto==), 24 colores de marca (en filas de 4, alineadas) y Operación de entregas (pausar domicilio; el retiro sigue disponible). En colores: Primario = encabezado y botones (Contacto ENVIAR, Iniciar sesión, Agregar, Finalizar compra, Realizar pedido, etc.); Hover de botón primario = color al pasar el mouse sobre todos esos botones de la tienda (catálogo, ficha, carrito lateral, carrito, checkout, sugerencias); Hover de botón secundario = lo mismo para los botones secundarios (p. ej. Ver carrito, Seguir comprando; vacío = el Secundario un poco más oscuro); Panel de totales, Texto del panel de totales y Borde del panel de totales = el recuadro Totales del carrito en /tienda/carrito y Tu pedido en el checkout (vacíos = siguen a Pie, Texto del pie y totales y Primario; la vista previa muestra el recuadro); los íconos de redes sociales del pie usan automáticamente Texto del pie y totales (no el Primario); Acento 1 = franja superior y franja de categorías; Pie + Acento 3 = panel derecho de Contacto cuando aún no hay foto. El favicon y el título SEO son propios del negocio (no Dilepack) en el dominio de la tienda. Tras guardar, la pestaña del navegador en el dominio público debe mostrar el título del negocio; si Google aún muestra Dilepack, pedí a Dilepack/ops reindexar en Search Console (el HTML compartido de Amplify ya no debe fijar canonical a www.dilepack.com en dominios de cliente).
   • Contraste de colores: debajo de la paleta aparece un aviso amarillo «Contraste bajo: algunos textos podrían no leerse» cuando un texto y su fondo se parecen demasiado (menos de 4,5:1), p. ej. Texto del pie y totales sobre Pie, Texto del panel de totales sobre Panel de totales, o el texto sobre Primario / Acento. Usar color sugerido cambia ese texto a blanco o negro (luego pulsa Guardar). No bloquea el guardado. Si el contraste queda muy bajo (menos de 3:1), la tienda muestra ese texto en blanco o negro automáticamente. Los paneles de totales (totales del carrito, «Tu pedido» en el checkout) usan siempre Texto del panel de totales (o, si está vacío, Texto del pie y totales) para títulos y textos, nunca el Primario.
   • Columna «Pagos» del pie: lista los métodos que el checkout ofrece realmente (p. ej. Transferencia bancaria, Efectivo contra entrega). Si PayPhone está activo (pasarela marcada en Checkout, incluida en el plan y con credenciales guardadas), muestra el logo de PayPhone y el texto «Tarjeta de crédito y débito — pago seguro con PayPhone». Al desactivar la pasarela o eliminar las credenciales, el logo desaparece del pie.
3. Inicio (?section=home): bloques de la home — carrusel, sección de tarjetas (título + subtítulo + hasta 6 tarjetas con imagen, texto, botón y enlace; toda la tarjeta es clicable), banner y bloque personalizado. Si tu tienda llegó con contenido de muestra (carrusel con insignia «MUESTRA», logo «Tienda de muestra», franjas «Espacio para franja promocional 1/2/3», encabezado Franja de categorías y categorías / productos como «Hogar (muestra)» o «Audífonos Bluetooth (muestra)»), reemplázalo aquí, en General y en Productos / Categorías (elimina las categorías y productos «(muestra)» cuando cargues los tuyos); ver 19 — Sitio web.
   • Las franjas que todavía dicen «Espacio para franja promocional N» no se muestran en la tienda pública (sí las ves en Sitio web para editarlas). Escribe tu propio mensaje o déjalas desactivadas.
   • Los productos «(muestra)» (o con código DEMO-) siguen visibles en la tienda mientras existan, pero no se incluyen en el feed de Google (/merchant-feed.xml) ni en el sitemap.xml.
   • Productos destacados (debajo de los bloques en /): no es un bloque editable. Muestra el catálogo público completo (productos visibles en la web y con stock; sin paquetes turísticos) en orden alfabético, de 24 en 24. Debajo aparece «Mostrando X de Y productos» y el botón Ver más productos para cargar los siguientes. Si un producto no aparece, revisá en Productos que esté marcado como visible en la web y que no esté agotado.
4. Contacto (?section=contact): datos visibles en /contacto (dirección, teléfono, correo, redes) y imagen del panel derecho (subí una foto real del local, productos o equipo). Sin imagen, el panel usa Pie de página + Acento 3 de la paleta, sin texto de relleno. La dirección, el teléfono y el correo de Contacto también se muestran en el pie (si están vacíos, se usan los de tus datos fiscales). El formulario de envío del visitante puede pulirse más adelante; no bloquea el checkout.
5. Nosotros: página CMS. Reemplaza el texto de ejemplo («Edita este texto…») con la historia real del negocio.
6. Términos (?section=terms): el texto estándar de Dilepack no se edita (el negocio es el vendedor). Solo puedes añadir cláusulas adicionales que salen al final de /terminos. El pie de la tienda enlaza esa página y muestra Impulsado por DILEPACK (enlace a https://www.dilepack.com), debajo del copyright del negocio.
   • Identidad en el pie: sobre el copyright aparece la línea razón social · RUC · dirección, ciudad, provincia, tomada de los datos fiscales del emisor activo (Organización → Perfil). Si el RUC aún es el de relleno (0000000000000) o la razón social está sin completar, ese dato no se muestra.
7. Devoluciones (?section=returns): página /politica-devoluciones («Cambios y devoluciones»), publicada y enlazada en el pie por defecto. El texto estándar de Dilepack (Ley Orgánica de Defensa del Consumidor, mínimo 3 días para compras en línea) no se edita. Arriba eliges: Pulsa Guardar aunque uses los valores sugeridos: así la página queda configurada y el plazo se publica también en los datos estructurados para Google. Puedes añadir condiciones adicionales al final.
   • Plazo para devolver (días desde la entrega, entre 3 y 90);
   • Envío de vuelta: lo paga el cliente (salvo productos defectuosos) o la tienda;
   • Forma de reembolso: mismo medio de pago, saldo a favor o transferencia bancaria.
8. Privacidad (?section=privacy): página /politica-privacidad, publicada y enlazada en el pie por defecto. Texto estándar de Dilepack (Ley Orgánica de Protección de Datos Personales) que nombra a tu negocio como responsable con la razón social, el RUC, la dirección y el correo. Solo se añaden cláusulas adicionales.
9. Listo para Google (?section=google): lista de comprobación para Google Merchant Center (identidad, contacto, políticas, contenido de muestra, logo, dominio), la URL del feed para copiar y los pasos en Merchant Center. Ver Comercio — Google Merchant Center.
10. Analítica (?section=analytics): pega el ID de contenedor GTM del negocio (ej. GTM-4K7NQ2P). Vacío = sin GTM en la tienda. No uses el contenedor de Dilepack; ese solo corre en dilepack.com. Tras guardar, abre el dominio público y comprueba en GTM Preview / red que carga tu contenedor.
    • Aviso de cookies (automático): con un ID de GTM guardado, el sitio muestra abajo el aviso «Usamos cookies» de Dilepack con el nombre de tu negocio, botones Aceptar y Rechazar y enlace a tu Política de privacidad. Sin ID de GTM no aparece. Antes de cargar tu GTM, la tienda deja en denegado la analítica y la publicidad (Modo de consentimiento de Google v2); con Aceptar se conceden, con Rechazar siguen denegadas. El cliente cambia su decisión en Preferencias de cookies, al pie del sitio; la elección dura 12 meses en ese navegador.
    • No instales otro banner (CookieYes, Cookiebot, etc.) en tu GTM: verías dos avisos y señales de consentimiento contradictorias. Las etiquetas de Google (GA4, Google Ads) respetan el consentimiento solas; las que no son de Google (por ejemplo un píxel de Meta o TikTok) deben configurarse en GTM con consentimiento adicional ad_storage.
    • Política de privacidad: añade en Privacidad → cláusulas adicionales que el sitio usa cookies de Google Analytics y Google Ads (y de cualquier otra herramienta de tu GTM) solo con tu consentimiento.
    • Compras en GA4: no crees una etiqueta purchase en GTM ni en la página de confirmación. Cuando Dilepack activa la medición de compras para tu negocio, la compra se registra desde el servidor solo al confirmarse el pago (transferencia verificada o PayPhone aprobado), con el valor de los productos sin IVA ni envío. Solo se envía si el cliente aceptó el aviso de cookies antes de comprar. Detalle para ops: GA4: compras desde el servidor.
11. Envío (?section=shipping):
    • Orden en pantalla: Servicio de envío → Clases de empaque → Zonas de envío.
    • Cada zona agrupa cantones/ciudades (no provincias enteras). En carrito, checkout y direcciones guardadas el cliente elige primero la provincia y luego la ciudad/cantón disponible; el sistema aplica la tarifa de la zona.
    • Cada zona elige cómo cotizar:
    • Por peso: precio base hasta un kg incluido, más recargo por kg extra.
    • Por clase de empaque: definí clases (Sobre, Caja chica, Caja grande) y un precio por clase en esa zona. En el carrito se cobra la clase más alta de los productos, una sola vez (no se multiplica por cantidad).
    • Asigná la clase de empaque en cada producto público (no se infiere de la categoría). Si una zona usa empaque y un producto no tiene clase, el checkout rechaza la cotización.
    • Para eliminar una clase que ya usan productos: el diálogo pide reasignar esos productos a otra clase y luego borra la clase. Renombrar solo cambia la etiqueta (los productos siguen vinculados).
    • Podés mezclar modos: p. ej. una zona Guayaquil+Samborondón por empaque y otra Sierra por peso.
    • Cada zona elige también su Envío gratis (Editar zona): Usar el monto general, Monto propio para esta zona o Sin envío gratis en esta zona. Ver Sugerencias y envío gratis.
    • Tras migrar desde provincias, una zona que tenía “Guayas” incluirá todos los cantones de Guayas hasta que la edites (dejá solo los cantones que correspondan).
    • Página Políticas de envío (/politicas-envio): en Sitio web, el texto de Dilepack está arriba (solo lectura). Añade plazos reales en cláusulas adicionales; no se asume entrega el mismo día.
    • Checkout: elige establecimiento y punto de emisión para pedidos web (la “caja” de la tienda). El checklist de onboarding no se completa si dejas “Automático”. También: transferencia bancaria, contra entrega, retiro en tienda, pasarela online (p. ej. PayPhone) si el plan y las credenciales lo permiten. En Pago en línea, marca Ofrecer pago en línea, elige el proveedor y pulsa Activar pasarela; al Guardar credenciales (Token API, Store ID, sandbox) la pasarela queda activa y Ofrecer pago en línea se guarda marcado automáticamente (mensaje «Pasarela activada.»).
    • Con la pasarela activa se muestra una tarjeta «PayPhone conectado»: Store ID enmascarado (solo los últimos 4 caracteres), Token API «Guardado (cifrado)» (nunca se muestra), fecha de configuración y el modo Pruebas (sandbox) o Producción. En modo pruebas no se cobran tarjetas reales.
    • Reemplazar credenciales: vuelve a ingresar Token API y Store ID (el token guardado no se puede ver ni recuperar).
    • Eliminar credenciales: tras confirmar, borra las credenciales cifradas y desmarca Ofrecer pago en línea; el checkout deja de ofrecer pago con tarjeta. Requiere permiso de edición de organización.
    • Bloqueado si hay pagos con tarjeta en curso: si algún pedido web con PayPhone sigue con pago Pendiente (creado en las últimas 24 h) o todavía está preparando su enlace de pago, no se eliminan las credenciales y se muestra el mensaje «No se pueden eliminar las credenciales…» con los números de esos pedidos. Espera a que se paguen (o usa Confirmar pago recibido) o anula esos pedidos, y vuelve a intentarlo. Los pedidos pagados, anulados o pendientes de más de 24 h no bloquean.
    • Sugerencias y envío gratis (tarjeta entre Zonas de envío y Checkout): ver Sugerencias y envío gratis.
12. Publicá / actualizá productos y categorías en el menú Productos; revisá stock si usás inventario. Crear el producto, Ajuste manual (por opción) e historial: 25 — Catálogo e inventario.
    • En el formulario de producto el orden es: identidad (con foto de catálogo) → Venta (incluye listas de precios) → Compra → Inventario → Opciones (talla, color…) → Sitio web.
    • Las reglas de precio (pestaña en Productos) se aplican solas al precio de la tienda (PVP de catálogo, sin elegir «Bulto»). Las de cantidad mínima se anuncian como Precio por mayor: ver Precio por mayor.
    • Opciones (bienes): hasta 2 por producto (p. ej. Talla y Color), cada una con hasta 12 valores. Controla stock por valor hace que cada combinación (p. ej. S / Rosa) tenga su propio stock y SKU (p. ej. 4812-S-ROSA, se genera solo si lo dejás vacío); ese SKU se escanea en POS. Una opción sin control de stock solo anota el valor elegido en la descripción (el stock es el total del producto). El código de ítem (p. ej. 4812) sigue siendo el de factura/SRI. Detalle: 25 — Catálogo e inventario.
    • El stock por combinación no se edita en la ficha (solo se ve). Ajuste manual está solo en Inventario (deshabilitado hasta guardar en producto nuevo). Tras guardar, usá ese botón con sucursal + opción + cantidad. Las existencias iniciales al crear el producto solo aplican si ninguna opción controla stock.
    • Sitio web → Visible: peso/empaque, fotos extra (hasta 2), fotos por valor de la opción marcada con Una foto por valor (normalmente Color) y SEO. Un producto público con esa opción necesita foto de cada valor. La foto de catálogo (arriba) pasa a ser obligatoria. Ocultar de la web (listado o ficha) no borra slug ni SEO.
    • Sitio web → Productos sugeridos (al final de la sección, solo al editar un producto ya guardado): hasta 8 productos que la tienda ofrece junto a este. Ver Sugerencias y envío gratis.
    • Guardar deja en la misma ficha (sin alerta del navegador). Tras crear, la URL pasa a edición.
    • En la ficha pública (/producto/{slug}) el visitante elige un valor de cada opción (desplegables; los valores sin stock aparecen deshabilitados y la foto cambia con el valor de la opción con fotos). Todas las opciones son obligatorias para añadir al carrito; cada combinación distinta es una línea distinta. Desde el listado de categoría, si el producto tiene opciones, Añadir al carrito abre un selector rápido de opciones. Los valores de opciones sin stock se anotan en la descripción del pedido (p. ej. Patín — S — Rosa); en el carrito, las líneas antiguas sin opción muestran un aviso antes de checkout.
13. Abrí Ver sitio público y recorrê: categoría → producto → carrito → finalizar compra (en prueba).

Precio por mayor

Los precios por cantidad salen de las reglas de precio (25 — Catálogo e inventario). No hay otra configuración en Sitio web.

Qué se anuncia

Una regla aparece en la tienda solo si: la campaña es para Todos los clientes, tiene marcado Mostrar en la tienda en línea, está vigente hoy, pide más de 1 unidad y deja el precio más bajo que el escalón anterior.

Cómo se cuenta

• La cantidad mínima se suma por producto: 2 rosadas + 1 azul del mismo producto = 3 unidades. Productos distintos no se suman entre sí.
• El precio final lo decide el servidor al crear el pedido (igual que el carrito); la nota de pedido y la factura llevan ese mismo precio.
• Si la campaña tiene Mostrar en la tienda en línea desmarcado, el descuento igual se aplica en el carrito y el checkout, pero no se anuncia (sin insignia, recuadro ni página).
• Las campañas para un cliente no se anuncian ni se aplican en la tienda (el visitante no se identifica como ese cliente).

Sugerencias y envío gratis

Sirven para que el cliente agregue algo más antes de pagar. Todo es discreto: nada bloquea la pantalla y en celular ocupa como máximo la mitad inferior.

Qué ve el visitante

• + Agregar suma 1 unidad. Los productos con opciones (talla, color…) muestran Ver opciones y llevan a su ficha.
• Nunca se sugieren productos que ya están en el carrito, ocultos de la web, agotados, sin stock, con precio $0 ni paquetes turísticos.

De dónde salen las sugerencias

1. Elegidas por ti: en Productos → editar producto → Sitio web → Productos sugeridos. Busca por nombre o código, pulsa +, ordena con ↑ / ↓, quita con × y pulsa Guardar sugerencias (se guarda aparte del botón Actualizar del producto). Máximo 8; un producto no puede sugerirse a sí mismo. Si eliges uno oculto de la web, se marca «No visible en la web» y no aparece en la tienda hasta publicarlo.
2. Automáticas (si no elegiste, o para completar): productos que otros clientes compraron en el mismo pedido web y, después, productos de la misma categoría.
3. En el checkout se priorizan los complementos baratos (hasta ~30 % del subtotal del carrito).

Configurar (staff)

1. Organización → Sitio web → Envío (/organization/website?section=shipping), tarjeta Sugerencias y envío gratis.
2. Mostrar sugerencias: desmárcalo para apagar el panel, la fila del carrito y los complementos del checkout (el carrito vuelve a abrir su cajón al añadir).
3. Envío gratis desde $ (IVA incluido): monto general, el total de productos (sin el envío) desde el cual el envío a domicilio cuesta $0. Vacío = sin envío gratis general.
4. Pulsa Guardar.
5. Opcional, por zona: en Zonas de envío → Editar zona → Envío gratis, elige:
   • Usar el monto general (valor por defecto; las zonas creadas antes de esta opción quedan así);
   • Monto propio para esta zona: ingresa el monto (obligatorio, mayor a 0). Sirve aunque el monto general esté vacío;
   • Sin envío gratis en esta zona: el envío se cobra siempre (p. ej. Galápagos o provincias lejanas).

Pulsa Guardar en el diálogo de la zona.

Resultado esperado

• Con un mínimo de, p. ej., $50: el carrito muestra «Te faltan $X para envío gratis» y una barra de progreso; desde exactamente $50 muestra «Tienes envío gratis», la cotización de envío pasa a $0 y el pedido se crea sin línea de envío. Lo decide el servidor al crear el pedido, aunque el navegador muestre otra cosa.
• Si el monto cambia según la zona (montos propios o zonas sin envío gratis): antes de elegir la ciudad, la barra muestra «Envío gratis desde $X en zonas seleccionadas» con el monto más bajo de todas las zonas activas. Al elegir la ciudad, la barra usa el monto exacto de esa zona; si la zona no tiene envío gratis, la barra desaparece.
• El checkout, la cotización de envío y el pedido usan siempre el monto de la zona elegida.
• Aplica a zonas de envío del comercio y a la entrega por distancia (mapa) de restaurantes; la entrega por distancia usa siempre el monto general. No aplica al retiro en tienda ni a las entregas que se coordinan por WhatsApp (ahí no se muestra la barra).
• En la página de producto, el costo de envío que se publica para Google es 0,00 solo si todas las zonas activas darían envío gratis a ese producto (ver Google Merchant Center).

Pasos — Atender un pedido web

1. El checkout crea una nota de pedido (origen tienda). Si el producto controla stock y no permite backorder, el checkout reserva las unidades (no se pueden vender otra vez mientras el pedido esté abierto). Si no hay disponible, el visitante ve un error y no se cobra. Con PayPhone / pago en línea, el pedido se guarda primero en estado pendiente; el visitante puede ver un breve «Preparando pago…» y luego se redirige a PayPhone. Por ahora el cobro se confirma manualmente: PayPhone envía al negocio el correo/aviso de pago aprobado (también visible en la app o panel de PayPhone); el personal verifica el monto y la referencia SF… y, en la nota de pedido, usa Confirmar pago recibido. Hasta entonces el pago del pedido queda Pendiente. (La confirmación automática por webhook solo funciona si PayPhone habilita la «Notificación Externa» para la tienda, lo que requiere autorización previa de PayPhone: pedila a PayPhone indicando tu Store ID y la URL https://<dominio-del-API>/api/webhooks/payphone/NotificacionPago; no funciona en pruebas locales. Con ella activa, el pedido queda Pagado solo y no hace falta Confirmar pago recibido.) Si el cliente ya pagó en PayPhone y el negocio tiene el TransactionId, ops también puede re-sincronizar con POST /api/sales-orders/{id}/resync-payphone enviando el TransactionId de PayPhone (el del comprobante / panel PayPhone) e Idempotency-Key. El sistema consulta la Sale API, valida monto y SF… del pedido, y marca el pago como confirmado.
2. En el panel: 16 — Notas de pedido → confirmar pago si aplica → fulfillment (al pasar a en proceso se consume la reserva) → convertir a factura cuando corresponda (07 — Emitir factura). El borrador debe usar el mismo total que pagó el visitante, incluidos descuentos de campaña de la tienda.
3. Opcional mostrador: 22 — POS (add-on / plan Escala según catálogo).

Resultado esperado

• Visitante completa un pedido en la URL pública.
• Staff ve la NP, puede avanzar fulfillment y facturar.
• Métodos de pago y envío coinciden con lo configurado en Sitio web.

Si algo falla

• Banner de mejora de plan en Sitio web → falta entitlement storefront.
• Checkout rechaza o no muestra métodos → revisá sección Envío / checkout y establecimiento por defecto.
• Producto no aparece → no publicado, sin categoría, o plan/superficie.
• Pedido rechazado por stock → el producto controla existencias y no hay disponible (otro pedido web puede tenerlas reservadas). Revisá inventario en panel; anulá NPs abiertas sin pagar para liberar la reserva.
• Pedido sin stock controlado al comprar → si el producto no marca “gestionar stock”, el checkout no reserva; el descuento ocurre al avanzar fulfillment si más adelante activás inventario.
• Tras un upgrade que migra provincias → cantones, editá la zona y quitá cantones que no atiendas (p. ej. dejá solo Guayaquil y Samborondón).
• No aparecen sugerencias → Mostrar sugerencias está apagado, los productos elegidos están ocultos / agotados / ya en el carrito, o aún no hay pedidos web ni otros productos en la misma categoría.
• No aparece Precio por mayor → la campaña es de un cliente, tiene desmarcado Mostrar en la tienda en línea, está fuera de fechas, la regla pide 1 unidad o no deja un precio menor. Una regla de producto gana a la de categoría: si la del producto no tiene escalón, ese producto no muestra el de la categoría.
• No aparece la barra de envío gratis → falta el monto en Envío gratis desde $ (y ninguna zona tiene monto propio), la zona elegida está en Sin envío gratis en esta zona, el cliente eligió retiro en tienda, las entregas están pausadas o la entrega se coordina por WhatsApp.
• «Monto propio» no se guarda → el monto de la zona debe ser mayor a 0.
• Cuenta de cliente: el correo de activación debe abrirse en esta tienda (/activacion?email=…&token=…). Si se abre en app.dilepack.com/activacion, la verificación busca otro tenant y puede mostrar Hotel demo (marca de turismo de respaldo) y «No pudimos verificar tu cuenta». El enlace lleva un token y dura 24 horas; entre un reenvío y otro hay que esperar 5 minutos (el reenvío no cambia la contraseña). La contraseña de registro debe tener 8 o más caracteres, mayúsculas y minúsculas, un número y un carácter especial (igual que el personal). El personal nuevo no usa esta ruta: ver 06 — Invitar empleados.

Relacionados

• 19 — Índice sitio web
• Comercio — Google Merchant Center
• 16 — Notas de pedido
• 25 — Catálogo e inventario
• docs/DEPLOYMENT.md

Última revisión: 2026-11-08

Si este flujo cambia en el producto, actualiza esta página.