# Integra Shoprocket en cualquier sitio web
> Vende desde el sitio web que ya tienes. Crea una integración en Integraciones, haz clic en Obtener código y pégalo en tu página de WordPress, Squarespace, Wix, Webflow o HTML sencillo. Los cambios que guardes después llegan a todas las páginas sin volver a pegar.
Centro de ayuda / Integración - Actualizado el 28 de octubre de 2026
Una integración pone una parte de tu tienda en cualquier sitio web: un producto con botón de compra, un catálogo completo de productos, tus categorías o un cuadro de búsqueda. La creas en **Integraciones**, haces clic en **Obtener código** y pegas el código en tu página. El carrito y el pago se abren en tu propia página, así que los clientes nunca salen de tu sitio.
Solo pegas el código una vez. Cuando cambias una integración más tarde, incluso si la pasas a otro diseño, todas las páginas donde está se actualizan al guardar.
## Antes de empezar
- Añade al menos un producto activo. Una integración para un producto necesita un producto que vender.
- Debes poder editar tu sitio web y añadir un bloque de código o HTML a una página. Las notas para cada creador de sitios están más abajo.
## Paso 1 (opcional, recomendado): Añade Shoprocket a todas las páginas de tu sitio
En la parte superior de **Integraciones** hay una tarjeta llamada **Añade Shoprocket a todas las páginas de tu sitio**. Contiene una línea de código para el encabezado de tu sitio. Con ella puesta, tu carrito flotante y el chat en vivo funcionan en todas las páginas de tu sitio, no solo en las que tienen una integración, y cualquier integración que añadas después simplemente funciona.
1. En tu panel, ve a **Integraciones**.
2. En la tarjeta **Añade Shoprocket a todas las páginas de tu sitio**, haz clic en **Copiar**.
3. Elige tu creador de sitios en las pestañas bajo el código (**HTML**, **WordPress**, **Squarespace**, **Wix** o **Webflow**) y sigue sus dos pasos para pegar la línea en el encabezado de tu sitio.
4. Abre cualquier página de tu sitio. El estado de la tarjeta cambia de **Aún no detectado** a **Conectado**.
Puedes saltarte este paso. El código de cada integración incluye la misma línea, así que una integración funciona sola en cualquier página.
## Paso 2: Crea una integración
1. En **Integraciones**, haz clic en **Nueva integración**.
2. En **Qué muestra**, elige una: **Un producto**, **Catálogo de productos**, **Categorías** o **Búsqueda**.
3. Elige un diseño:
- **Un producto**: **Botón**, **Compacto**, **Tarjeta**, **Destacado** o **Detalle completo**. Luego elige el producto en **¿Qué producto?**
- **Catálogo de productos**: **Cuadrícula**, **Carrusel** o **Lista**. En **¿Qué productos?** elige **Todos los productos**, **Una categoría** o **Seleccionados a mano**.
- **Categorías**: **Mosaicos**.
- **Búsqueda**: **Cuadro de búsqueda** o **Icono de búsqueda**.
4. Haz clic en **Continuar**.
Cada diseño es la misma integración con ajustes distintos, así que puedes cambiar de diseño después en el editor y el código que pegaste sigue siendo el mismo.
## Paso 3: Personalízala
El editor muestra una vista previa en vivo por la que puedes navegar como un comprador: añadir al carrito, abrir productos y pagar. Cambia lo que muestra la integración en la pestaña **Esta integración**. La pestaña **Tienda** fija tus colores y tipos de letra para toda tu tienda, de modo que todas tus integraciones y tu carrito flotante coinciden.
La integración recibe al principio un nombre, como "Products · Grid". Puedes cambiarlo en cualquier momento.
Cuando estés conforme, haz clic en **Guardar y obtener código**.
## Paso 4: Copia el código y pégalo en tu sitio
Tras guardar, se abre el panel **Obtener código**. Tiene este aspecto:
```html
```
Copia siempre tu propio código con el botón, nunca lo vuelvas a escribir. La primera línea nombra la integración, el script carga Shoprocket para tu tienda y la última línea es donde aparece la integración.
1. Haz clic en **Copiar código**.
2. Elige tu creador de sitios en las pestañas del panel y pega el código donde debe aparecer la integración:
- **HTML**: pega el código donde debe aparecer la integración. La línea del script solo tiene que estar una vez en la página, por muchas integraciones que tenga.
- **WordPress**: en el editor de bloques, añade un bloque de **HTML personalizado** donde deba ir la integración. Pega el código y actualiza la página. En WordPress.com, los scripts requieren un plan que permita plugins.
- **Squarespace**: edita la página y añade un bloque de **Código** donde deba ir la integración. Pega el código, deja la visualización en HTML y guarda.
- **Wix**: en el editor, elige **Añadir**, luego **Insertar código** y luego **Insertar HTML**. Pega el código en el cuadro y ajusta su tamaño. Wix lo muestra en un marco, así que dale espacio para el carrito.
- **Webflow**: arrastra un elemento **Code Embed** donde deba ir la integración. Pega el código, guarda y publica el sitio.
Si ya añadiste Shoprocket al encabezado de tu sitio en el Paso 1, la página solo necesita la última línea del código, la que empieza por `