Proyecto de cliente · E-commerce

Avellanas Hoydi28

Para Hoydi28, una marca de avellanas de Giresun, desarrollamos la tienda online, un panel de administración que se instala en el móvil y las integraciones de pago, envío, factura electrónica, correo y Google que hay detrás. Dentro del panel trabaja el equipo de IA de Collapssi: escribe artículos para el blog, traduce el sitio a nuevos idiomas, planifica el escaparate y las campañas y redacta borradores de respuesta a los correos recibidos. La tienda y el panel son una sola aplicación; cada página se pregenera para Google en cada publicación.

  • JavaScript (aplicación de una sola página)
  • Supabase: PostgreSQL y Edge Functions
  • Netlify
  • Páginas prerrenderizadas con Playwright
  • PWA y Web Push
  • iyzico
  • EDM e-Factura / e-Archivo
  • Yurtiçi Kargo y Sürat Kargo
  • Resend
  • Google Analytics 4, Search Console, Google Ads, Merchant Center
  • Google Places API
  • Claude API
  • OpenAI Images API
Página de inicio de la tienda
Página de inicio de la tienda
Idiomas
Turco, inglés y nuevos idiomas que se abren según un calendario
Pago
Tarjeta (iyzico), transferencia bancaria
IA
Un equipo de Collapssi de siete miembros y un asistente de anuncios
Integraciones
Envío, factura electrónica, Google Ads, Analytics, Search Console

Las capturas se tomaron de una copia local del sitio y del panel de administración. Los nombres de clientes, pedidos, empresas y todas las cifras de los paneles son datos de ejemplo, no las ventas ni las visitas reales de la tienda. Los nombres en las reseñas de Google se muestran con sus iniciales.

01

Tienda y páginas de producto

La tienda funciona con el mismo cuidado en el móvil y en el ordenador. Los productos, las categorías y el diseño de las páginas se cambian desde el panel; los cambios de precios y textos aparecen al instante en el sitio. La página de producto responde en una sola pantalla a las preguntas que puede tener un cliente.

  • Tienda en turco e inglés; los nuevos idiomas se abren según un calendario automático y a los visitantes se les ofrece una traducción a su propio idioma
  • Insignias automáticas: «Más vendido» para los productos más vendidos de los últimos 60 días y «Más visto» para los más visitados, actualizadas cada noche
  • Ficha de alérgenos: alérgenos que contiene, posibles trazas y quién puede consumirlo (sin gluten, vegano, etc.) como etiquetas de colores
  • Un corazón de favoritos y una nota con el número de personas que han añadido el producto a favoritos
  • Selector de cantidad directamente en la tarjeta del producto; en la página del producto, el precio se actualiza según la cantidad y el envase, con aviso de límite de stock
  • Cestas de regalo cuyo precio y stock se calculan a partir de los productos que contienen; los clientes también pueden diseñar su propia cesta
  • Notas de regalo, elección de variedad para el köme y solicitud de «avísame cuando vuelva a haber stock»
  • Una indicación de «entrega solo en la terminal de autobuses» para productos que no pueden enviarse por mensajería
Página de producto: insignia de más vendido, favorito y precio
Página de producto: insignia de más vendido, favorito y precio
Información sobre alérgenos y quién puede consumirlo
Información sobre alérgenos y quién puede consumirlo
Tienda en un móvil
Tienda en un móvil
02

Cuentas, favoritos y una ruleta de premios

Los miembros encuentran pequeñas sorpresas en el sitio. Los clientes siguen su pedido paso a paso, reciben un correo cuando un favorito baja de precio o vuelve a estar disponible y giran la ruleta para conseguir un descuento.

  • Acceso con Google en un toque, en una esquina de la página y sin abrir otra, seguido de un saludo de bienvenida con emojis
  • Pasos de envío animados con emojis: pedido recibido, en preparación, en camino (el camión va y viene), entregado; con los movimientos de la mensajería y un enlace de seguimiento
  • Favoritos: los miembros que añaden cierto número de productos a favoritos reciben automáticamente un cupón personal; un correo cuando un favorito baja de precio o vuelve a estar disponible
  • Ruleta Hoydi: el servidor decide el resultado y el cupón se añade a la cuenta
  • Hoydi Para: puntos en cada pedido, recompensas por reseñas, pago con puntos
  • Direcciones y datos de facturación guardados; código de 6 dígitos por correo si se olvida la contraseña
Mi cuenta: pasos de envío con emojis
Mi cuenta: pasos de envío con emojis
Favoritos y barra de recompensa
Favoritos y barra de recompensa
Ruleta de premios Hoydi
Ruleta de premios Hoydi
03

Las reseñas de Google llegan solas

Las reseñas de Google de las dos tiendas se obtienen automáticamente cada mañana y se muestran en una banda en movimiento en el sitio. A los clientes cuyo pedido se ha entregado se les pide amablemente una reseña en Google.

  • Las reseñas de Google Business de las tiendas Merkez y Aksu se actualizan cada mañana mediante la Places API; la puntuación y el número de reseñas también están en directo
  • Una banda de reseñas en movimiento con filtro por tienda
  • Los miembros con un pedido entregado ven una sola vez la ventana «¿Ha llegado tu pedido?»; con un toque se abre la página de reseñas de Google de la tienda
  • No se ofrece ningún cupón porque Google prohíbe recompensar las reseñas; las reseñas de productos en el sitio otorgan Hoydi Para
Reseñas de Google en una banda en movimiento
Reseñas de Google en una banda en movimiento
Solicitud de reseña en Google tras la entrega
Solicitud de reseña en Google tras la entrega
04

Flujo de pago y pedidos

En los pagos con tarjeta, el servidor vuelve a calcular el importe; si no coincide con el que se muestra en el navegador, el pago no se inicia. Precios, campañas, cupones y envíos siguen un único conjunto de reglas.

  • Pago con tarjeta mediante el formulario de pago de iyzico en una ventana abierta dentro del sitio; compatible con 3D Secure
  • Cuando se confirma el pago, el pedido pasa a «Nuevo» y se descuentan los Hoydi Para y los cupones; si el cliente cierra la página, una tarea programada comprueba el resultado del pago
  • Transferencia bancaria: los datos bancarios se muestran en la página de pago y después del pedido
  • La provincia y el distrito de la dirección de entrega se eligen de una lista (81 provincias, 973 distritos)
  • Datos de facturación tras el pedido: particular o empresa; se validan los números de identidad y fiscales turcos
  • Correos automáticos: pedido recibido, enviado (con enlace de seguimiento), entregado
Página de pago
Página de pago
05

Un equipo de IA dentro del panel: Collapssi

La pestaña Collapssi del panel reúne a siete miembros de un equipo de IA que revisan su trabajo para Hoydi28 cada hora. Cada uno tiene un rol, una mascota cuyo estado de ánimo cambia y un bocadillo. Ninguno cambia nada sin aprobación: artículos, escaparate, campañas y respuestas de correo esperan la decisión de la tienda.

  • ✍️ Elif (redactora de contenidos): escribe artículos del blog en los días elegidos conociendo los productos y los artículos anteriores; marca un artículo con un aviso si algo incumple las reglas
  • 🌍 Deniz (traductor): traduce al inglés los textos de productos, blog y páginas introducidos en turco; abre nuevos idiomas como el alemán, el ruso y el árabe según un calendario automático y publica cada uno cuando la traducción está completa
  • 🎨 Arda (diseñador visual): dibuja imágenes adecuadas para cada artículo del blog, que se colocan entre los subtítulos
  • 📐 Selin (diseñadora del sitio): propone cambios en el escaparate según los clics y las ventas; antes de los días especiales prepara un banner, una diapositiva y una lista de productos para ese día, que se pueden previsualizar, se publican ese día tras la aprobación y después se retiran
  • 📅 Emre (planificador de campañas): planifica las próximas semanas: cupones, descuentos por tiempo limitado, correos a suscriptores, temas de blog para Elif y peticiones de escaparate para Selin; cada elemento se aprueba por separado
  • ✉️ Zeynep (asistente de correo): lee cada correo recibido junto con los pedidos y la ficha de empresa del remitente, investiga empresas en la web y redacta una respuesta; propone correos de seguimiento a posibles clientes mayoristas
  • 🧭 Kerem (jefe de equipo): la tienda chatea con él; Kerem hace que el miembro adecuado del equipo haga la corrección y convierte las preferencias de «a partir de ahora» en reglas permanentes
  • Las reglas básicas no se pueden cambiar: nada de datos inventados, afirmaciones de salud ni precios; cada miembro tiene una cuota de trabajo mensual
Chat con el jefe de equipo Kerem y reglas permanentes
Chat con el jefe de equipo Kerem y reglas permanentes
Elif, Deniz y Arda
Elif, Deniz y Arda
Selin, Emre y Zeynep
Selin, Emre y Zeynep
Un escaparate para un día especial y un plan de campaña pendientes de aprobación
Un escaparate para un día especial y un plan de campaña pendientes de aprobación
06

Panel de administración

El propietario de la tienda gestiona todo el negocio desde un único panel. Se instala en el móvil como una app; cada nuevo pedido genera una notificación y el icono de la app muestra el número de pedidos pendientes.

  • Panel principal: ingresos del día, barras de objetivos que se llenan, estado del equipo Collapssi, ventas de los últimos 14 días, desglose por categoría
  • Pedidos: los de hoy por defecto, navegación día a día, filtros de estado y factura; los pedidos que llegan por anuncios y los clientes nuevos llevan una insignia
  • Selección y acciones masivas: imprimir, facturar o cambiar el estado de los pedidos seleccionados
  • Albarán de envío A5 (también se puede elegir A4 o una impresora de etiquetas de 10×15); los pedidos impresos pasan solos a «En preparación» y las notas de regalo se imprimen en una tarjeta aparte
  • Usuarios del panel y roles; código por correo al iniciar sesión desde un dispositivo nuevo
  • Editor de páginas: añadir y reordenar bloques, con vista previa para ordenador, tableta y móvil
  • Ventanas propias del sitio en lugar de los cuadros de confirmación del navegador; en el móvil, una barra superior, un menú que se desliza desde la izquierda y una barra de pestañas inferior
Panel de administración
Panel de administración
Pedidos
Pedidos
Panel de administración en el móvil
Panel de administración en el móvil
07

Objetivos, Analytics y Search Console

Los objetivos de ventas se llenan como una cuota y los datos de Google llegan al panel. En la parte superior de los informes, la mascota de Collapssi comenta la situación: se alegra cuando todo va bien, se sorprende cuando las cifras bajan y sugiere qué hacer.

  • Objetivos: los periodos de venta del sitio anterior sirven de referencia; las barras de ingresos, pedidos y unidades vendidas se llenan, con una marca de «hoy deberíamos estar aquí» y una previsión para el final del periodo
  • Visitantes (Google Analytics 4): visitas, conversión en pedidos, canales, dispositivos, ciudades y productos más vistos
  • Búsqueda de Google (Search Console): clics, impresiones, porcentaje de clics, posición media, búsquedas y páginas
  • Informe de ventas y gastos, clics de WhatsApp
  • Correo de informe semanal: cada viernes por la mañana, un resumen con gráficos (ingresos, anuncios, nuevos miembros, más vendidos y tareas pendientes), preparado por Collapssi
Objetivos y la mascota de Collapssi
Objetivos y la mascota de Collapssi
Visitantes (Google Analytics)
Visitantes (Google Analytics)
Búsqueda de Google (Search Console)
Búsqueda de Google (Search Console)
08

Google Ads y un asistente de anuncios con IA

Los datos de Google Ads llegan al panel cada hora mediante un script colocado en la cuenta. El asistente de IA redacta un resumen diario y prepara sugerencias; en la cuenta de anuncios no cambia nada sin la aprobación de la tienda.

  • Informes por campaña, grupo de anuncios, palabra clave, término de búsqueda y, en los anuncios de Shopping, por producto
  • Los pedidos que llegan por anuncios se cuentan por separado y se comparan con el gasto
  • Sugerencias: palabras clave negativas, nuevas palabras clave, presupuestos, coste máximo por clic y nuevos textos de anuncio; las tareas aprobadas se aplican en la siguiente ejecución del script
  • Límites de seguridad: el tope de presupuesto diario total y el rango de pujas se comprueban en tres lugares distintos
  • El script se actualiza solo: un cargador pegado una vez en la cuenta de Google Ads descarga el código principal desde el sitio
  • El feed de productos de Merchant Center se actualiza en cada publicación; la etiqueta de conversión y el modo de consentimiento de Google están configurados
Asistente de anuncios con IA y sugerencias pendientes de aprobación
Asistente de anuncios con IA y sugerencias pendientes de aprobación
09

Correo y cestas abandonadas

El buzón de la empresa está dentro del panel. Los correos automáticos llevan el diseño de la marca, y a un cliente que dejó productos en la cesta se le puede enviar un recordatorio con un toque.

  • Bandeja de entrada: conversaciones, destacados, archivo, etiquetas, posponer, borradores y envío programado; varias direcciones de la empresa
  • Cestas abandonadas: visitantes que añadieron productos pero no compraron y los productos que más se quedan en la cesta; recordatorios por correo y WhatsApp
  • Correos de campaña a suscriptores: suscripción con consentimiento expreso, un recuadro de cupón y un enlace para darse de baja en cada correo
  • Correos de días especiales: en fechas como el Día de la Madre, las fiestas religiosas y Año Nuevo se envían solos un correo de felicitación y un cupón para ese día
  • Correos de pedido, envío y entrega; avisos de precio y stock de los productos favoritos
Cestas abandonadas y recordatorios
Cestas abandonadas y recordatorios
10

Búsqueda de clientes mayoristas

Cafeterías, hoteles, tiendas de frutos secos y empresas que compran regalos corporativos se encuentran en Google Maps y se siguen en el panel como un embudo de ventas.

  • Búsqueda de empresas: en Google Maps por tipo y ciudad; si la empresa tiene sitio web, la dirección de correo se obtiene de su web
  • Una secuencia de presentación de tres correos por tipo de empresa: en días laborables, con un límite diario y un enlace para darse de baja en cada correo; la secuencia se detiene cuando la empresa responde
  • Ficha de empresa: llamadas, muestras, presupuestos y pedidos hacen avanzar la etapa; todo el historial en una sola pantalla
  • Comunicados: compartir nuevos productos y campañas con las empresas mediante fichas de producto
  • Una lista de precios mayoristas fija para todos, lista para imprimir; las solicitudes mayoristas del sitio llegan automáticamente a la lista de empresas
Venta mayorista: empresas y secuencias de correo
Venta mayorista: empresas y secuencias de correo
11

Envío, factura electrónica y otras integraciones

Las integraciones funcionan en funciones del servidor; las claves secretas nunca llegan al navegador. Las facturas y los avisos de envío se generan desde la ficha del pedido, y su estado se actualiza solo.

  • Integración con Yurtiçi Kargo y Sürat Kargo lista: aviso de envío con un toque, código de barras de referencia Code 128 en el albarán y consulta de estado cada dos horas
  • Factura electrónica y archivo electrónico (EDM Bilişim): factura electrónica si el comprador está registrado, si no, archivo electrónico; las facturas de todos los pedidos de la lista pueden emitirse de una vez
  • Los descuentos de cupones, campañas y Hoydi Para se reparten proporcionalmente entre las líneas de la factura
  • Avisos de pedidos nuevos por Web Push; el icono de la aplicación muestra el número de pedidos pendientes
  • Acceso con Google; acceso con Apple listo
Albarán de envío A5 con el código de barras de referencia de la mensajería
Albarán de envío A5 con el código de barras de referencia de la mensajería

¿Tienes en mente un proyecto similar?

Cuéntanos qué necesitas; definiremos juntos el alcance, los plazos y el coste. La primera consulta es gratuita.

Cuéntanos tu proyecto