Tienda online desarrollada desde cero: catálogo, UX, arquitectura SEO básica e integración con Santander

Contenido del caso

Tienda online de ropa con temática ciclista

Buje.es — tienda online de ropa para el mercado español: camisetas, sudaderas y hoodies para hombres, mujeres y niños con un estilo visual unificado.

El proyecto fue desarrollado e implementado íntegramente por mí desde cero.

Mi rol: estructura del catálogo, páginas, UX, optimización de categorías, banners promocionales, arquitectura SEO, creación de imágenes de producto e integración de pagos.

Objetivos del proyecto

01 — Diseñar una estructura de catálogo clara y lógica.

02 — Desarrollar la página principal con enfoque en promociones, categorías y ventas.

03 — Garantizar el ciclo completo de compra online (Santander / Redsys / Bizum).

04 — Configurar un sistema automatizado de envío de pedidos.

05 — Implementar el escenario de captación de demanda en caso de falta de talla — «Avísame cuando haya stock».

06 — Establecer la arquitectura SEO básica de las categorías: H1–H3, textos, FAQ, microdatos.

07 — Crear un estilo visual unificado de las páginas de producto mediante producción y tratamiento del contenido fotográfico.

Arquitectura del catálogo y de las páginas de categoría

El catálogo está diseñado para que el comprador entienda rápidamente el surtido y pueda pasar a la compra sin fricción.

Entorno digital

Página de categoría con H1 contextual, subcategorías visibles y texto SEO que facilita la comprensión del catálogo y capta tráfico orgánico.

Las páginas de categoría funcionan al mismo tiempo como escaparate y como páginas optimizadas para tráfico orgánico gracias a una estructura SEO fundamental:

  • jerarquía correcta de encabezados
  • texto SEO
  • FAQ compacto

La estructura permite ampliar el surtido sin modificar la lógica del sitio.

Sudaderas mujer

Listado de productos dentro de la categoría con filtros por talla y color, breadcrumbs y ordenación, facilitando la navegación y la elección rápida del producto.

Listado sudaderas

Bloque de texto SEO y FAQ dentro de la categoría que amplía el contexto semántico y capta tráfico orgánico adicional.

Artículo blog

Estructura correcta de encabezados H1–H3 en la categoría, mostrando la base de la arquitectura SEO aplicada.

Lógica de conversión e-commerce

La tienda fue concebida desde el inicio como una plataforma orientada a la conversión:

Integración de pago online Santander / Redsys / Bizum.

Documento análisis

Métodos de pago online disponibles en el checkout: Redsys (Santander) y Bizum.

Integración con el servicio Envia Shipping & Fulfillment para automatizar los envíos: creación de la etiqueta de transporte directamente desde el panel administrativo del sitio, solicitud del mensajero y envío del pedido sin operaciones manuales.

Datos de envío

Gestión del envío desde el pedido en WooCommerce mediante Envia: creación de etiqueta, solicitud del mensajero y seguimiento.

Productos variables (tallas).

Camiseta verde bici

Producto variable con selección de talla en la página de producto.

Escenario de falta de talla: aviso «Avísame cuando haya stock».

Camiseta verde bici

Escenario sin talla disponible con opción “Avísame cuando haya stock” para no perder la demanda del cliente.

Guía de tallas accesible desde la página de producto.

Ficha producto

Tabla de medidas visible para ayudar al cliente a elegir la talla correcta.

Esto reduce la pérdida de demanda, simplifica la gestión de pedidos y garantiza el ciclo completo del e-commerce hasta la entrega del producto al cliente.

Página principal, navegación y bloques comerciales

La página principal está construida como un punto de entrada comercial y de marketing:

banner promocional interactivo con descuento y accesos directos a productos.

Banner descuento

Estado inicial del banner interactivo en la página principal.

Banner descuento

Aparición de la tarjeta de producto al pasar el cursor sobre la zona interactiva.

Bloques de productos

Nuestros productos

Vista del surtido en la portada que facilita el acceso rápido a los productos.

Oferta específica para niños.

Ropa casual

Estado inicial del banner con la oferta orientada al público infantil en la portada.

Ropa casual

Visualización de la tarjeta de producto al interactuar con la zona destacada del banner.

Ventajas del producto.

Productos destacados

Bloque informativo que ayuda al cliente a tomar la decisión de compra.

Sección de artículos informativos que mantiene el sitio actualizado con contenido reciente y funciona como punto adicional de entrada desde el tráfico orgánico.

Banner bicicleta

Listado de publicaciones recientes que evidencia la actividad y actualización continua del sitio.

Footer funcional con navegación por todo el sitio.

Footer

Navegación completa por el sitio disponible desde el footer.

Key visuals y banners promocionales de la página principal — desarrollados por mí (Photoshop). Todos los bloques comerciales y de navegación están adaptados a dispositivos móviles y tablets.

Fotocontenido y unificación visual de las páginas de producto

Organicé un flujo completo de producción visual: sesión fotográfica de productos, procesamiento de imágenes con IA, edición manual en Photoshop, aplicación de prints y elementos visuales.

Fondo oscuro

Proceso de edición y composición visual de las imágenes de producto en Photoshop.

Unificación de todas las páginas bajo un estilo visual coherente de marca y optimización del tamaño y peso de las imágenes para una carga rápida.

Catálogo camisetas

Presentación del catálogo con una identidad visual homogénea en todas las tarjetas de producto.

Como resultado, las páginas de producto parecen parte de una sesión profesional de una misma colección y no sobrecargan el sitio.

Resultado

La tienda online vende con éxito desde el verano de 2025 y continúa procesando pedidos online hasta hoy.

La estructura del catálogo, las páginas de categoría y las páginas de producto están preparadas para ampliar el surtido sin modificar la lógica del sitio.

Stack tecnológico

WordPress, Woodmart, WooCommerce, Elementor
Santander / Redsys / Bizum
Envia Shipping
InStock Notifier
Procesamiento de imágenes con IA, Photoshop

Otros casos de éxito:

Analicemos tu proyecto