Diseño de tienda online, del catálogo al cobro

Una tienda online empieza desde 59 €/mes. Esa es la cifra de partida de un proyecto con catálogo propio, ficha de producto, carrito, cobro con tarjeta y panel de administración. El precio final se cierra en el presupuesto, con el alcance escrito, y no se mueve después salvo que pidas algo nuevo y lo apruebes tú.

Montar una tienda online cuesta más o menos según cuatro cosas, y ninguna de ellas es el color de los botones.

Si quieres una estimación rápida antes de hablar con nadie, en el calculador de precios eliges el tipo de proyecto y las funcionalidades y sale una horquilla al momento. Lo que entra en cada nivel, y qué se puede dejar para el segundo trimestre, está desglosado en la página de paquetes y precios.

Dos avisos que ahorran dinero. El primero: no hace falta cargar el catálogo entero el día del lanzamiento si vendes sobre todo cinco familias de producto. El segundo: si ya tienes una web que funciona, a veces no hay que tirarla. Climatizare.net era una web de servicios de climatización y la convertimos en tienda online completa, sin reescribir el código existente y con un despliegue sin caída del servicio.

El catálogo es la parte que más trabajo da y la que menos se ve en una maqueta bonita. Antes de diseñar nada hay que decidir cómo se organiza: categorías, subcategorías, atributos por los que el comprador va a filtrar y qué producto pertenece a qué sitio. Esa estructura es la que luego rastrea Google y la que usa tu cliente para llegar en tres clics a lo que busca.

La ficha de producto tiene un trabajo muy concreto: contestar, sin hacer scroll, a lo que el comprador necesita saber para decidir. Nombre y variante seleccionada, precio visible, disponibilidad real, plazo de entrega, gastos de envío o la condición para que no los haya, y el botón de compra. Debajo van las fotos, la descripción, las medidas o la ficha técnica, y las opiniones si las tienes publicadas.

El stock que se muestra tiene que ser el stock que hay. Es la regla que más devoluciones y más llamadas evita. Cuando vendes también en otros canales, la sincronización deja de ser un detalle. Para Zelviro construimos una tienda con más de 13.000 productos, integrada con eMAG, Trendyol y Temu, con sincronización automática de stock y pedidos y optimizada para la conversión. A ese tamaño, el catálogo no se mantiene a mano.

El buscador interno merece atención propia. En un catálogo grande, buena parte de las compras empieza escribiendo en la caja de búsqueda. Si esa caja no tolera un error de tecleo, no entiende sinónimos ni deja filtrar el resultado, estás perdiendo al comprador con más intención de todos. Lo montamos sobre los atributos reales de tu catálogo y revisamos qué se busca sin encontrar nada.

El cobro con tarjeta en Europa pasa por autenticación reforzada, lo que en la práctica ves como 3-D Secure: el banco del comprador confirma la operación. Eso cambia el flujo de compra y hay que probarlo con tarjetas de prueba antes de abrir, no el primer día con clientes reales.

Cada pasarela es una integración distinta, con su alta, su validación y sus pruebas. En Modena integramos el cobro con tarjeta mediante BT iPay3 y el pago a plazos con TBI Bank, sobre una arquitectura pensada para un volumen constante de pedidos. Si vendes en España, dinos con qué pasarela quieres cobrar y lo fijamos en el presupuesto antes de empezar, porque el trabajo de integración cambia según cuál sea.

Los envíos se configuran por zonas y por peso o por importe, con las agencias que uses, y el comprador tiene que ver el coste antes de llegar al pago. Un gasto de envío que aparece en el último paso es la causa más repetida de carritos abandonados.

La devolución no es solo un texto legal, es un proceso. Alguien recibe la solicitud, alguien la aprueba, el producto vuelve al almacén y el stock se recompone. Lo dejamos montado en el panel para que no acabe llevándose por correo y hoja de cálculo.

Si vendes a consumidores en España, la tienda tiene obligaciones que no dependen del diseño. Estas son las que afectan de forma directa a cómo se construye la web.

Identificación del vendedor visible y accesible: denominación, dirección, identificación fiscal, correo electrónico y un teléfono o medio de contacto rápido. Va en el aviso legal y enlazado desde todas las páginas.

Información previa a la compra: características del producto, precio final que va a pagar el comprador, gastos de envío, plazo de entrega y medios de pago aceptados. El botón que cierra el pedido tiene que decir con claridad que ese clic obliga a pagar.

Derecho de desistimiento de 14 días naturales para el consumidor, con las excepciones que la normativa contempla, un formulario de desistimiento disponible y la explicación de quién asume el coste de la devolución.

Garantía legal del producto y condiciones de la posventa, escritas en su propia página y no escondidas en un párrafo de las condiciones generales.

Protección de datos y cookies: base legal del tratamiento, política de privacidad real y analítica que no se activa hasta que el visitante da su consentimiento.

Nosotros dejamos la estructura montada, las páginas creadas, los avisos en el sitio correcto del proceso de compra y el consentimiento funcionando de verdad. Los textos legales concretos los revisa un jurista en España antes de publicar. No hacemos asesoría jurídica y no te la vamos a vender.

El feed es el fichero con el que Google lee tu catálogo. Si el feed está mal, tus productos no aparecen, por bonita que sea la tienda. Y lo que más tumba ofertas no son errores raros, son cuatro campos mal puestos.

El identificador de producto tiene que ser estable. Si cada vez que editas una ficha cambia la referencia, el historial de ese producto se pierde y vuelves a empezar.

El precio del feed y el precio de la web tienen que coincidir, incluida la moneda. Una diferencia entre los dos es motivo de rechazo inmediato.

La disponibilidad tiene que reflejar el stock real y actualizarse sola. Un producto anunciado como disponible que no lo está es un problema doble, con Google y con el comprador.

Las imágenes tienen que ser del producto, sin marcas de agua ni textos promocionales encima, y con resolución suficiente.

Lo montamos de forma que el feed salga del mismo sitio del que sale la tienda, sin un segundo catálogo que mantener a mano. Cuando el feed y la web beben de la misma base de datos, las diferencias dejan de existir. Y revisamos los rechazos de la cuenta durante las primeras semanas, que es cuando aparecen casi todos.

Una tienda con diez productos va rápida casi por accidente. Con miles de referencias, variantes y filtros, la velocidad es una decisión de arquitectura que se toma al principio.

Lo que hacemos para que un catálogo grande no se arrastre: consultas preparadas para el listado y los filtros, en lugar de pedir a la base de datos que lo calcule todo cada vez; caché en las páginas de categoría, con invalidación cuando cambia el precio o el stock; imágenes servidas en formato moderno y en el tamaño que pide el dispositivo; carga diferida de lo que está por debajo de la pantalla; y paginación o carga progresiva pensada para móvil.

El móvil es donde se decide. La mayoría de las visitas de una tienda llegan desde el teléfono, muchas veces con una conexión mediocre. Por eso medimos en condiciones de móvil y no solo en el portátil del despacho.

ZooFood es un buen ejemplo de que la base importa: una tienda online especializada en alimentación animal para VETSVSA SRL, con un motor PHP a medida y una versión Next.js en paralelo. Cuando el motor es tuyo, se optimiza justo donde hace falta en lugar de pelearse con lo que trae un tema comprado.

Este es el recorrido real de un proyecto de tienda, del primer correo a la primera venta.

Uno, briefing. Qué vendes, a quién, cuántas referencias tienes, qué variantes, con qué agencias envías y con qué pasarela quieres cobrar. Una videollamada y un documento corto.

Dos, presupuesto. Alcance escrito, precio cerrado y calendario, en 48 horas desde que la información está clara.

Tres, estructura de catálogo. Categorías, atributos y filtros sobre papel antes de tocar el diseño. Es el paso que más tiempo ahorra después.

Cuatro, diseño. Portada, listado, ficha de producto, carrito y proceso de compra, con tu contenido real cuando ya existe. Se aprueba por escrito antes de programar.

Cinco, desarrollo e integraciones. Panel de administración, carga o importación del catálogo, pasarela de pago, envíos, feed de productos y páginas legales.

Seis, pruebas. Pedidos de prueba de principio a fin, pagos con tarjeta de prueba, devoluciones, correos automáticos y revisión en móvil.

Siete, publicación. Redirecciones si ya tenías web, analítica con consentimiento, Search Console conectado y entrega de accesos, código y cuentas a tu nombre.

Páginas relacionadas: vender en varios países desde la misma tienda