Logo El Paramo
Propuesta visual Landing publica + CMS
Documento de revision autonoma

Propuesta visual del sitio web y CMS

Este documento esta pensado para enviarse y revisarse sin una presentacion en vivo. Resume como se veria la experiencia terminada para El Paramo: una landing mas comercial, una Tienda con carrito liviano, cierre de pedido por WhatsApp y un CMS para actualizar contenido sin tocar codigo.

Objetivo del documento Validar el lenguaje visual, la organizacion comercial y el alcance de contenido antes de pasar a implementacion. Las imagenes representan el resultado esperado de la web y el CMS.
Decisiones solicitadas
  • Secciones publicas suficientes: Inicio, Tienda, Nosotros y Contacto.
  • Uso de colores del logo en botones, banners, categorias y CMS.
  • Pedido sin pago online: carrito y cierre por WhatsApp.
Como revisarlo En cada pantalla se explica que comunica, que se debe aprobar y que queda incluido. La revision puede responderse con observaciones puntuales por seccion.

Inicio product-led

Home con hero comercial, promociones, productos destacados, categorias, marcas y flujo para finalizar por WhatsApp.

Inicio comercial Carrito activo Home
Mockup PNG de la pagina Inicio product-led de El Paramo
Que comunicaLa pantalla de Inicio deja de ser solo una carta de presentacion y se convierte en una vitrina de venta. El primer impacto muestra dulces, promociones, categorias y marcas para que el visitante entienda rapido que puede comprar o cotizar.
Para aprobar esta vistaConfirmar si el balance entre marca, productos y promociones refleja el tono que El Paramo quiere mostrar al publico.
IncluyeProductos destacados, promociones editables, categorias visibles, marcas vendidas y acceso directo al carrito/WhatsApp.
Venta visibleMas producto desde el primer viewport.
PromocionesPanel comercial amarillo/rojo con descuentos.
MarcasStrip de marcas distribuidas.
WhatsAppCierre de pedido sin pagos online.

Tienda / catalogo

Catalogo con filtros, buscador, tarjetas de producto, cantidades, carrito lateral y CTA de finalizacion por WhatsApp.

Catalogo Carrito WhatsApp
Mockup PNG de la pagina Tienda con catalogo y carrito de El Paramo
Que comunicaLa Tienda organiza el catalogo mayorista en una experiencia facil de explorar: buscar, filtrar, comparar productos y agregar cantidades al carrito sin exigir pago en linea.
Para aprobar esta vistaConfirmar categorias, marcas iniciales, si los precios seran publicos y que datos necesita ver el asesor al recibir el pedido por WhatsApp.
IncluyeBuscador, filtros, grilla de productos, estados de disponibilidad, carrito lateral y boton de finalizacion por WhatsApp.
FiltrosCategoria, marca, precio y disponibilidad.
ProductoPrecio COP, presentacion y agregar.
CarritoDrawer con cantidad y subtotal estimado.
Sin pagosEl asesor confirma por WhatsApp.

Nosotros

Pagina de confianza con historia, bodega, equipo, cifras, razones para elegir El Paramo y CTA hacia tienda/WhatsApp.

Marca Confianza CTA WhatsApp
Mockup PNG de la pagina Nosotros de El Paramo
Que comunicaNosotros refuerza confianza: muestra trayectoria, bodega, equipo, cobertura y razones para comprarle a El Paramo. Esta pantalla ayuda a que un cliente nuevo sienta respaldo antes de pedir.
Para aprobar esta vistaConfirmar historia real, cifras verificables, fotos autorizadas y el tipo de prueba social que se puede usar.
IncluyeHistoria, diferenciales comerciales, cifras, testimonio, llamados a Tienda y WhatsApp.
HistoriaMayorista local con presencia regional.
OperacionBodega, equipo y distribucion.
Prueba socialTestimonio de tendero.
ConversionBotones a Tienda y WhatsApp.

Contacto

Formulario con consentimiento Ley 1581, datos de atencion, cobertura, mapa y recordatorio de finalizar carrito por WhatsApp.

Formulario Ley 1581 WhatsApp
Mockup PNG de la pagina Contacto de El Paramo
Que comunicaContacto concentra los caminos de atencion: formulario para solicitudes comerciales, datos de contacto, cobertura y una salida clara para quienes ya tienen productos en el carrito.
Para aprobar esta vistaConfirmar datos reales de contacto, horario, cobertura, texto legal de consentimiento y numero WhatsApp definitivo.
IncluyeFormulario con consentimiento Ley 1581, envio a CRM, tarjetas de contacto y CTA para finalizar carrito por WhatsApp.
FormularioLead comercial hacia CRM.
PrivacidadConsentimiento visible.
ContactoTelefono, correo, direccion y horarios.
CarritoCTA alterno para pedidos listos.

CMS Payload - secciones editoriales

Pantallas de referencia para el backoffice auto-hospedado: contenido de Inicio, catalogo, promociones, categorias, marcas, medios, legal, usuarios y ajustes globales. El CMS administra contenido y configuracion comercial; no incluye pasarela de pagos.

CMS Dashboard

Resumen operativo del sitio: contenido, productos, promociones, formularios, pedidos por WhatsApp y salud del sistema.

Resumen CMS PayloadCMS Admin
Mockup PNG del dashboard CMS de El Paramo
Que comunicaEl dashboard funciona como tablero de control del sitio. Le da al equipo una vista rapida de contenido publicado, productos, promociones, formularios y senales de pedidos por WhatsApp.
Para aprobar esta vistaConfirmar que estos indicadores son utiles para la operacion diaria y si hace falta ocultar alguno para usuarios editores.
IncluyeResumen de actividad, accesos rapidos, salud del sistema y ultimos cambios del CMS.
ResumenIndicadores principales de contenido.
WhatsAppSenales de pedidos iniciados.
ActividadUltimos cambios editoriales.
SaludEstado de servicios y publicacion.

CMS Inicio

Editor por bloques para hero, promociones, productos destacados, categorias, marcas, testimonios y contacto.

Editor visual Home comercial Preview
Mockup PNG del editor CMS de Inicio
Que comunicaEl editor de Inicio permite actualizar la vitrina principal sin apoyo tecnico: textos del hero, promociones, productos destacados, categorias, marcas y llamados a WhatsApp.
Para aprobar esta vistaConfirmar que los campos son entendibles para un editor no tecnico y que el flujo de borrador, vista previa y publicacion es claro.
IncluyeBloques editables, preview visual, control de publicacion y contenido conectado a la landing.
BloquesSecciones editables de la home.
PromosPanel comercial editable.
PreviewVista previa antes de publicar.
PublicacionBorrador, preview y publicar.

CMS Productos

Gestion del catalogo: imagen, SKU, marca, categoria, presentacion, precio, disponibilidad y habilitacion de carrito.

Productos Carrito Catalogo
Mockup PNG del CMS de productos
Que comunicaProductos es el corazon comercial del CMS. Desde aqui se administra lo que aparece en Tienda, en Inicio y en el mensaje de pedido que llega por WhatsApp.
Para aprobar esta vistaConfirmar campos obligatorios: SKU, presentacion, precio, marca, categoria, disponibilidad e imagen.
IncluyeCrear, editar, publicar, destacar, habilitar carrito y preparar datos para el checkout WhatsApp.
CatalogoProductos publicados en Tienda.
PrecioCOP visible o consulta por WhatsApp.
DisponibilidadEstado disponible/agotado.
SEOSlug e informacion de detalle.

CMS Promociones

Administracion de promociones visibles en Inicio y Tienda, con vigencia, productos asociados y vista previa.

Promociones Promos Vigencia
Mockup PNG del CMS de promociones
Que comunicaPromociones permite mover la venta desde el CMS: activar ofertas por temporada, asociarlas a productos y decidir si se muestran en Inicio, Tienda o ambos espacios.
Para aprobar esta vistaConfirmar si las promociones tendran fechas de inicio/fin, descuentos visibles y reglas de disponibilidad.
IncluyeProgramacion, vigencia, productos asociados, ubicacion de publicacion y vista previa.
VigenciaProgramada, vigente o vencida.
ProductoAsocia items del catalogo.
UbicacionInicio, Tienda o ambas.
PreviewBanner antes de publicar.

CMS Categorias

Gestion de categorias comerciales para filtros de Tienda y chips destacados de Inicio.

Filtros Tienda Home
Mockup PNG del CMS de categorias
Que comunicaCategorias ayuda a ordenar la compra. Lo que se configure aqui alimenta filtros de Tienda y accesos rapidos en Inicio para que los usuarios lleguen antes al producto correcto.
Para aprobar esta vistaConfirmar la lista inicial de categorias y el orden comercial que quiere priorizar El Paramo.
IncluyeNombre, slug, icono, color, orden, visibilidad en Inicio y relacion con productos.
OrdenControl de prioridad visual.
ColorSwatches de marca por categoria.
SlugURL limpia para filtros.
HomeToggle visible en Inicio.

CMS Marcas

Gestion de marcas vendidas/distribuidas, logos, orden y visibilidad dentro del strip de confianza.

Marcas BrandStrip Visible
Mockup PNG del CMS de marcas
Que comunicaMarcas refuerza confianza comercial. El CMS permite controlar que logos aparecen en la landing y en que orden, sin depender de cambios de codigo.
Para aprobar esta vistaConfirmar marcas autorizadas, logos disponibles y prioridad de exhibicion.
IncluyeLogo, descripcion, productos asociados, orden, estado visible y marca destacada.
LogoUpload y recorte de marca.
RelacionProductos asociados.
DestacadoMarca visible en Inicio.
OrdenControl del carrusel o grid.

CMS Biblioteca de medios

Repositorio de imagenes para productos, hero, marcas, mapa, legales y capturas de manual.

Media Alt text En uso
Mockup PNG de biblioteca de medios CMS
Que comunicaLa biblioteca de medios centraliza las imagenes del sitio: productos, banners, logos, mapa y soportes de contenido. Esto evita perder archivos y ayuda a mantener accesibilidad.
Para aprobar esta vistaConfirmar quien subira imagenes y que calidad minima deben tener las fotos de producto.
IncluyeSubida de archivos, texto alternativo, relacion de uso, reemplazo seguro y control de archivos en uso.
AccesibilidadTexto alternativo por imagen.
UsoDonde se consume cada asset.
ReemplazoCambio de imagen sin romper contenido.
ControlEvita borrar archivos en uso.

CMS Usuarios y roles

Gestion de editores, administradores, acceso de solo lectura y matriz de permisos por coleccion.

Permisos RBAC 2FA
Mockup PNG del CMS usuarios y roles
Que comunicaUsuarios y roles protege la operacion. No todos necesitan administrar todo: un editor puede cambiar contenido, mientras un administrador conserva permisos sensibles.
Para aprobar esta vistaConfirmar cuantos usuarios del cliente entraran al CMS y que permisos necesita cada rol.
IncluyeInvitaciones, roles, matriz de permisos, 2FA, acceso denegado y auditoria basica.
RolesAdmin, editor y solo lectura.
PermisosLeer, crear, editar y publicar.
Seguridad2FA y acceso denegado.
AuditoriaRegistro de cambios sensibles.

CMS Ajustes del sitio

Configuracion global: identidad de marca, contacto, SEO, analitica, WhatsApp checkout, footer y redes.

SiteConfig SEO WhatsApp
Mockup PNG del CMS ajustes del sitio
Que comunicaAjustes del sitio agrupa configuraciones que impactan toda la experiencia: datos de contacto, identidad, SEO, analitica y la plantilla del mensaje que se envia por WhatsApp.
Para aprobar esta vistaConfirmar numero final de WhatsApp, datos de contacto, redes sociales, dominio y formato del mensaje de pedido.
IncluyeMarca, contacto, SEO global, GA4, consentimiento, plantilla WhatsApp, footer y redes.
MarcaLogo, favicon y colores.
ContactoTelefono, correo, horario y direccion.
AnaliticaGA4 y consentimiento.
CheckoutNumero y plantilla WhatsApp.

Para avanzar a implementacion

Si la linea visual y el alcance general son aprobados, el siguiente paso es cerrar contenido real: productos iniciales, marcas, promociones, datos de contacto, numero WhatsApp y textos legales. Con esa informacion se puede convertir esta propuesta visual en pantallas funcionales.

Aprobar direccion visualConfirmar que la marca se siente suficientemente colorida, comercial y cercana al universo de dulceria mayorista.
Confirmar contenido baseEntregar lista de productos, categorias, marcas, promociones, datos de contacto y textos legales definitivos.
Validar flujo de pedidoConfirmar que el carrito sin pago online y la finalizacion por WhatsApp son el flujo correcto para la primera version.