Crear una tienda online a medida no consiste solo en conseguir una portada bonita. Si el cliente configura un producto, esa misma selección tiene que llegar al carrito y quedar guardada en el pedido. Ahí es donde comprobamos si hemos construido una tienda o solamente una presentación.
Hace unos años, llevar un diseño propio a WooCommerce requería bastante más trabajo. Hoy podemos avanzar mucho más rápido con inteligencia artificial, pero seguimos necesitando algo fundamental: tener claro qué queremos construir y cómo vamos a comprobar que funciona.
Voy a hacerlo con Forja, una tienda ficticia de PC a medida. Prepararé las imágenes y los vídeos con Google Flow, crearé el diseño y el configurador con Claude Code y después lo llevaré a WordPress en Hostinger. Finalmente, conectaré las opciones con WooCommerce y completaré un pedido de prueba sin cobrar nada.
El producto es un ordenador, pero el proceso no depende de él. Lo importante es definir qué puede elegir el cliente y qué información necesitamos recibir cuando confirma su compra.
Tabla de contenido
- 🧭 Primero, define el recorrido del producto al pedido
- 🎨 Crear imágenes y vídeos de producto con Google Flow
- 🛠️ Diseñar la tienda con Claude Code en local
- ⚙️ Añadir el montaje interactivo y el configurador
- 📱 Probar en móvil y corregir con errores concretos
- 🌐 Instalar WordPress en Hostinger y subir el tema
- 🛒 Conectar el configurador con WooCommerce
- 🔐 Actualizar los archivos por SSH con una copia previa
- 🧪 Probar el carrito y resolver la finalización de compra
- ✅ Verificar el pedido guardado y la experiencia pública
- 🚀 Aplicar el proceso a otro producto
🧭 Primero, define el recorrido del producto al pedido
Para no mezclar todos los problemas desde el principio, separo el proyecto en tres partes:
- Presentación: imágenes, portada, materiales y una secuencia visual del montaje.
- Configuración: selección de uso, memoria, almacenamiento y acabado, con un resumen que refleje las opciones elegidas.
- Compra: conexión con el carrito, formulario de finalización y almacenamiento del pedido en WooCommerce.
Primero resolveré la experiencia en local, es decir, en mi ordenador. Después publicaré esa misma web como tema de WordPress. Solo cuando el diseño esté instalado conectaré la parte comercial.
Esta separación permite comprobar cada etapa por su cuenta. Si el resumen del configurador ya está mal antes de conectar WooCommerce, no tiene sentido buscar el problema en el carrito.
También fijo desde el inicio los límites de la prueba: la tienda será una demo, los precios serán ejemplos y los pedidos de prueba estarán reservados a administradores. No habrá cobros, envíos ni correos asociados a esas pruebas. Podemos validar el recorrido completo sin presentarlo como una tienda lista para vender.
🎨 Crear imágenes y vídeos de producto con Google Flow
Empiezo por el producto en Google Flow. Creo un proyecto llamado Forja y preparo una imagen que servirá como referencia para el resto de los recursos.
La petición describe una fotografía de un PC para juegos terminado, visto en un ángulo de tres cuartos. Especifico una caja de aluminio grafito, panel lateral de cristal, dos ventiladores frontales azul hielo y una tarjeta gráfica horizontal. El equipo debe aparecer completo, centrado sobre un fondo de estudio gris claro, con iluminación limpia, detalle y sin textos ni logotipos.
No estoy pidiendo simplemente una imagen atractiva. Estoy definiendo la apariencia del producto para poder reutilizarla después. El ángulo, los materiales, el fondo y la iluminación me ayudan a mantener una identidad coherente.
Usar una referencia para mantener el mismo equipo
Con la fotografía del PC terminado como referencia, genero otra versión con la caja abierta. Pido conservar el ángulo y el fondo para que se reconozca como el mismo ordenador, no como un producto diferente.
Después utilizo la opción de fotogramas de Flow: coloco el equipo abierto al principio y el equipo cerrado y encendido al final. Así preparo el clip que utilizaré para representar el montaje en la página.
Este paso tiene una intención concreta. Necesito dos estados visuales coherentes para construir una transición entre ellos. Si cambio de caja, encuadre o iluminación entre una imagen y otra, pierdo esa continuidad.
Preparar una composición distinta para la portada
La portada necesita otra distribución. Quiero el PC grande a la derecha y espacio libre a la izquierda para explicar la propuesta de la tienda y colocar el botón que lleva al configurador.
Vuelvo a partir de la imagen del equipo terminado y preparo una composición con fondo oscuro. Para generar el vídeo de portada, utilizo esa misma fotografía como imagen inicial y final, buscando que pueda repetirse en bucle.
La primera versión tiene un reflejo que tapa parte del interior. En lugar de rehacer todo, pido suavizar ese reflejo y guardo la segunda versión. La revisión no consiste solo en decidir si la imagen gusta: también hay que comprobar si deja ver lo que queremos mostrar.
Al terminar, reúno cuatro archivos en la carpeta media del proyecto:
- La fotografía de portada.
- El vídeo de portada.
- La fotografía del producto terminado.
- El vídeo de montaje.
Con los recursos organizados, Claude puede trabajar con archivos concretos del proyecto, en lugar de tener que adivinar qué imagen corresponde a cada sección.
🛠️ Diseñar la tienda con Claude Code en local
En Claude Code Desktop abro el selector de la parte inferior y elijo abrir una carpeta. Selecciono la carpeta completa de Forja, no solamente la de imágenes. Así Claude puede leer los recursos y trabajar con los archivos de la misma web.
Para esta sesión selecciono también frontend-design, la guía de diseño. A continuación, preparo una instrucción que reúne estructura, estilo, tecnología y forma de revisión.
Le pido crear una web en español para una tienda ficticia de PC personalizados, utilizando HTML, CSS y JavaScript. La portada debe reproducir el vídeo en silencio y en bucle, con la fotografía como alternativa. El mensaje principal queda a la izquierda y el ordenador, a la derecha.
Después debe aparecer una sección clara de materiales con la fotografía del equipo terminado. La dirección visual gira alrededor del aluminio, el grafito y el azul hielo. Y dejo explícito que el diseño también tiene que funcionar en móvil.
La instrucción termina pidiendo una vista local para revisar el resultado. Quiero abrir la página en mi ordenador antes de subirla al alojamiento.
En esa primera revisión compruebo tres cosas sencillas: que el equipo esté donde lo pedí, que el título se lea bien y que el botón para configurar el PC resulte fácil de encontrar.
Son criterios mucho más útiles que pedir una web “más moderna”. Si algo falla, puedo señalar el elemento concreto: la posición del producto, la legibilidad del mensaje o la visibilidad de la llamada a la acción.
La IA acelera la creación, pero la dirección sigue siendo nuestra. Cuanto más clara sea la intención de cada sección, más fácil será decidir qué conservar y qué corregir.
⚙️ Añadir el montaje interactivo y el configurador
Con la presentación resuelta, añado dos piezas distintas: una secuencia de montaje controlada por el desplazamiento y un configurador donde el cliente pueda elegir su equipo.
Convertir el vídeo en una secuencia controlada por desplazamiento
Para el montaje, pido a Claude que convierta el vídeo en imágenes WebP mediante FFmpeg, a 24 fotogramas por segundo, y que las represente usando canvas.
El comportamiento esperado queda definido así:
- Al bajar por la página, la secuencia avanza.
- Al subir, la secuencia retrocede.
- Al detener el desplazamiento, mantiene la imagen correspondiente.
- Las imágenes se cargan por tramos para evitar parpadeos.
- En móvil debe seguir viéndose el cristal abierto.
- Se debe respetar la preferencia de reducir movimiento.
También pido que solo se carguen los fotogramas necesarios cerca de la posición actual. La idea es poder recorrer el montaje en ambas direcciones sin mantener toda la secuencia en memoria.
El encuadre móvil merece una indicación propia. No basta con reducir el tamaño del ordenador si al hacerlo desaparece justo la parte que explica la apertura de la caja.
Hacer que cada elección aparezca en el resumen
Después de la secuencia dejo una pausa visual y añado la sección de configuración. El cliente puede elegir el uso del equipo, la memoria, el almacenamiento y el acabado, además de consultar dos vistas del producto.
En esta primera etapa, el configurador no compra nada. Mantiene la cotización en local y permite copiar un resumen. La conexión comercial vendrá después.
La comprobación es directa: si selecciono 64 GB de memoria, el resumen debe mostrar esos mismos 64 GB. Repito la revisión con el disco, el acabado y el uso. Que un botón cambie de color no demuestra que la selección esté bien guardada.
En esta misma petición enlazo el botón de portada con el configurador y pido identificar el sitio como demo. También elimino cifras inventadas y promesas que no corresponden a un producto real. Una presentación convincente no necesita datos comerciales ficticios.
📱 Probar en móvil y corregir con errores concretos
Antes de publicar, activo la vista móvil de Chrome y abro la consola. Al cambiar el ancho aparecen dos errores: uno relacionado con el icono de la pestaña y otro con la secuencia de montaje.
Copio el error exacto y se lo paso a Claude. Pido añadir el icono y conservar la última imagen del montaje mientras cambia el tamaño de la ventana.
Este detalle importa porque una página puede parecer correcta en un ancho fijo y fallar al redimensionarla. La prueba no consiste únicamente en abrir una captura estrecha, sino en cambiar el ancho y seguir interactuando.
Después vuelvo a Chrome, recargo con la consola abierta y repito el recorrido. Compruebo que aparece la caja abierta, que la secuencia llega al PC encendido y que la consola permanece sin errores. Más abajo cambio opciones y reviso el resumen en ese mismo ancho.
El ciclo de trabajo es corto y comprobable:
- Reproducir el problema.
- Recoger el error o describir el resultado incorrecto.
- Pedir una corrección específica.
- Recargar y repetir la misma prueba.
Así evitamos encadenar cambios sin saber cuál de ellos resolvió el fallo. Ahora sí tengo la página que utilizará el cliente y puedo llevarla a WordPress.
🌐 Instalar WordPress en Hostinger y subir el tema
Para publicar utilizo un plan de Hostinger compatible con WordPress. Puedes acceder desde mi enlace de descuento de Hostinger. Si contratas a través de ese enlace, también apoyas directamente mi contenido.
En hPanel entro en Sitios web, pulso Crear sitio web y selecciono WordPress. En el asistente elijo configurarlo manualmente y, para esta prueba, utilizo un dominio temporal.
Ese dominio me permite abrir la tienda mientras la preparo. A continuación, introduzco el correo y la contraseña de administración, que serán los datos para entrar al escritorio de WordPress. Elijo crear el sitio desde cero y espero a que termine la instalación.
Convertir la web en un tema instalable
El diseño sigue en la carpeta Forja de mi ordenador. Para que WordPress pueda utilizarlo, vuelvo al mismo proyecto de Claude y le pido convertir la web en un tema, manteniendo su aspecto y funcionamiento.
Solicito el resultado en un archivo ZIP. Ese paquete reúne las plantillas, los estilos y, en este caso, los archivos del configurador para poder instalarlos desde el escritorio.
Guardo también la carpeta editable. El ZIP sirve para la instalación inicial, pero las modificaciones posteriores las seguiré haciendo sobre los archivos del proyecto.
En WordPress sigo esta ruta:
- Entro en Apariencia > Temas.
- Pulso Añadir nuevo y después Subir tema.
- Selecciono el ZIP preparado por Claude.
- Pulso Instalar ahora.
- Cuando termina, activo el tema.
Después abro el sitio y compruebo que carga la portada y que puedo cambiar las opciones del PC. La instalación no termina al recibir la confirmación de WordPress: hay que revisar que la experiencia siga funcionando en el servidor.
Conectar Hostinger y revisar la caché
Para consultar el sitio desde Claude, entro en los ajustes de conectores y busco Hostinger. Si el acceso necesita renovarse, autorizo la conexión y vuelvo al proyecto. Le paso el dominio temporal y compruebo que lo encuentra y reconoce WordPress.
Hay otro detalle práctico: si actualizo archivos, recargo y sigo viendo lo mismo, puede ser la caché. En el panel del sitio de prueba abro la sección CDN de Hostinger y activo el modo de desarrollo para comprobar los cambios mientras trabajo.
Conviene distinguir ambos problemas. Un cambio que no aparece no demuestra, por sí solo, que el archivo no se haya subido o que la corrección esté mal.
🛒 Conectar el configurador con WooCommerce
En WordPress entro en Plugins > Añadir nuevo, busco WooCommerce, instalo el plugin principal y lo activo. A partir de aquí tengo la base para gestionar productos, carrito y pedidos.
Antes de conectar el configurador, reviso WooCommerce > Ajustes > Avanzado. Compruebo que estén asignadas las páginas de carrito y de finalizar compra. Si alguno de esos campos está vacío, selecciono la página correspondiente y guardo.
Representar las opciones con un producto variable
Para el PC utilizo un producto variable. Eso permite representar un mismo producto con distintas combinaciones, por ejemplo, más memoria o un disco de mayor capacidad.
Si vendiera una mesa, las variantes podrían corresponder al tamaño y al acabado. La lógica es la misma: relacionar las decisiones de la interfaz con una combinación que WooCommerce pueda registrar.
Le pido a Claude conectar el configurador de Forja al carrito mediante ese producto variable. También indico que mantenga el tema editable y me diga qué archivos cambian, sin preparar otro ZIP.
Repito las condiciones de seguridad de la demostración: datos ficticios, precios de ejemplo, pedidos solo para administradores y ninguna operación real de cobro, envío o correo. Que aparezca un importe de ejemplo no significa que vayamos a cobrarlo.
Crear el producto de prueba sin duplicarlo
Para generar el PC en WordPress, pido añadir un botón en el escritorio. Al pulsarlo, debe crear el producto de prueba; si vuelvo a pulsarlo, tiene que reutilizar el mismo producto.
Esta condición evita llenar el catálogo de copias cada vez que repito una prueba. La preparación del entorno debe poder repetirse sin crear un producto nuevo innecesariamente.
En Forja, el resultado es un PC conectado con 96 variaciones, correspondientes a las combinaciones disponibles. Abro el producto y entro en Datos del producto > Variaciones para localizar la combinación que utilizaré después: creación de contenido, 64 GB de memoria, SSD de 2 TB y acabado grafito.
Así tengo una referencia concreta con la que comparar lo que llegue desde el configurador.
🔐 Actualizar los archivos por SSH con una copia previa
Para aplicar los cambios al tema instalado, pido a Claude realizar una copia de seguridad y subir únicamente los archivos modificados mediante SSH. No necesito volver a empaquetar todo el tema.
En hPanel, el acceso se consulta en Avanzado > Acceso SSH. Ahí compruebo si está activo y dónde están los datos de conexión. En mi caso, la conexión ya está configurada en el ordenador.
El orden del despliegue es importante:
- Verificar que estamos en la carpeta del sitio correcto.
- Guardar una copia del tema fuera de la carpeta pública.
- Subir solo los archivos que han cambiado.
- Comprobar qué tema y qué versión están activos.
En esta prueba, la comprobación devuelve Forja 1.1.1. Esa verificación permite confirmar que el sitio está utilizando la versión esperada antes de continuar.
El conector de Hostinger y la subida por SSH aparecen en el mismo flujo, pero cumplen tareas distintas. Consultar el sitio desde Claude no sustituye la comprobación del despliegue. Lo que me interesa es saber qué se modificó, conservar una copia anterior y verificar el resultado.
🧪 Probar el carrito y resolver la finalización de compra
Ahora realizo el recorrido con la cuenta de administrador. En el configurador elijo creación de contenido, 64 GB de memoria, SSD de 2 TB y acabado grafito anodizado. Reviso el resumen y pulso el botón para añadirlo al carrito de prueba.
Quiero comprobar algo muy concreto: que llegue el PC tal como lo configuré, no simplemente un producto con el nombre correcto.
Primer problema: las opciones no se leen bien
En el primer intento, el equipo aparece en el carrito, pero las opciones tienen texto oscuro sobre un fondo oscuro. La conexión funciona, aunque el resultado es difícil de leer.
Le pido a Claude corregir el contraste en carrito y finalización de compra, y subir únicamente los archivos modificados mediante la misma conexión SSH. Después recargo y compruebo la legibilidad.
Este fallo recuerda algo importante: el diseño de la portada no garantiza el de las páginas comerciales. El carrito y el formulario también forman parte de la experiencia y necesitan su propia revisión.
Segundo problema: el formulario no genera el pedido
Continúo a finalizar compra y pruebo el formulario de bloques que viene instalado. Completo los datos y confirmo, pero no aparece ningún pedido en WooCommerce.
En esta implementación cambio solamente esa página al formulario clásico, manteniendo la demo sin pagos. No es una conclusión general sobre los bloques de WooCommerce, sino la solución aplicada al fallo encontrado en esta prueba.
El cambio manual se realiza así:
- Abro la página Finalizar compra y entro en su editor.
- Activo la vista de lista para localizar el bloque de finalización de compra.
- Elimino ese bloque.
- Añado un bloque de Código corto.
- Introduzco
[woocommerce_checkout]. - Guardo los cambios y recargo la página.
Al volver al sitio aparecen los datos de facturación del formulario clásico. Repito la prueba, reviso la información y confirmo de nuevo.
Ahora sí aparece la pantalla de pedido recibido, con la memoria, el almacenamiento y el acabado que había elegido. Pero todavía falta comprobar la parte administrativa.
✅ Verificar el pedido guardado y la experiencia pública
Entro en WooCommerce > Pedidos y abro el pedido 112 de esta prueba. Aparece completado y contiene las opciones del PC y el precio de ejemplo.
También verifico que corresponde a la variación 52, la combinación que había localizado previamente en el producto. Así cierro la comprobación entre la selección inicial y los datos guardados.
Los números del pedido y de la variación pertenecen a este entorno. En otro sitio serán diferentes. El criterio que importa es que el pedido conserve la misma configuración elegida en la tienda.
Para terminar, abro la tienda original en modo incógnito. Puedo recorrer las secciones, elegir opciones y consultar el precio de muestra. Para realizar el pedido de prueba, en cambio, debo iniciar sesión como administrador.
Esta última revisión comprueba que no estoy confundiendo la experiencia pública con los permisos de mi cuenta. La demo debe permitir explorar el producto sin abrir la creación de pedidos de prueba a cualquier visitante.
Antes de dar por validado el recorrido, repaso estos puntos:
- El botón de portada lleva al configurador.
- El montaje funciona en escritorio y móvil sin errores de consola.
- El resumen refleja cada opción seleccionada.
- El carrito conserva la combinación y permite leerla.
- El formulario genera realmente un pedido.
- WooCommerce guarda las opciones esperadas.
- Las restricciones de la demo también se cumplen sin iniciar sesión.
🚀 Aplicar el proceso a otro producto
Para crear una tienda distinta, empezaría por dos preguntas: ¿qué necesita elegir tu cliente y qué información necesitas recibir con el pedido?
En Forja son el uso, la memoria, el almacenamiento y el acabado. En una mesa podrían ser el tamaño y la terminación. Con esas decisiones claras puedes definir el configurador, relacionarlo con las variaciones y preparar una prueba que recorra todo el proceso.
La IA ayuda a generar recursos, diseñar la interfaz, convertirla en un tema y corregir problemas. Pero la validación sigue necesitando criterios concretos. No basta con que Claude indique que una tarea terminó: hay que abrir la página, cambiar opciones, confirmar el pedido y revisar lo guardado.
Si quieres seguir explorando creación web, también te dejo Dínamo Sites. Y para continuar con proyectos y aprendizaje alrededor de la creación con IA, puedes conocer mi comunidad, Círculo Builders.
El resultado de este proceso es una demo con diseño propio, configurador conectado y un pedido verificado de principio a fin. Ese es el punto de partida útil: una experiencia que no solo presenta el producto, sino que conserva correctamente lo que el cliente eligió.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
