Instalación manual
Esta etiqueta es toda la integración. Sustituye la clave por la tuya, pégala una vez y no cambies nada más: ningún atributo en tus productos, ningún botón escrito por ti, ningún ID de producto.
<script
src="https://www.cabina.io/widget.iife.js"
crossorigin="anonymous"
async
data-api-key="cab_live_TU_CLAVE">
</script>No añadas el atributo integrity. La dirección del bundle no está versionada,
así que un hash fijado haría que el navegador rechazara el script en nuestra
siguiente publicación — en silencio, y sin que podamos avisarte.
Ponla en cualquier punto dentro de <head>, o justo antes de </body>. Las dos
opciones funcionan: el script es async y espera a la página por su cuenta.
Dónde pegarla, plataforma por plataforma
Shopify
Temas
En tu administración de Shopify ve a Tienda online → Temas.
Editar código
En tu tema activo abre el menú ⋯ y elige Editar código.
theme.liquid
Abre layout/theme.liquid.
Pega
Pega la etiqueta justo antes de la etiqueta </head> de cierre.
Guarda
Guarda. El cambio está activo de inmediato: no hay ningún tema que publicar.
Shopify emite una imagen Open Graph en cada página de producto, así que la prenda se encuentra sin que hagas nada más.
WooCommerce
Un plugin de snippets
En WordPress instala un plugin de snippets de código (WPCode, Code Snippets) — o usa tu tema hijo.
Crea el snippet
Crea un snippet que se ejecute en la cabecera del sitio y pega ahí la etiqueta.
O el tema hijo
Con un tema hijo, añádela a functions.php en el hook wp_head.
Comprueba
Guarda y abre una página de producto.
WooCommerce no emite og:image sin un plugin SEO. Cabina recurre entonces a
la imagen de la galería — mira La imagen de la prenda.
Wix
Código personalizado
En tu panel de Wix ve a Configuración → Código personalizado.
Añade
Haz clic en Añadir código personalizado, pega la etiqueta y llámala «Cabina».
Dónde
En «Añadir código a las páginas» elige Todas las páginas, y colócala en el Head.
Publica
Aplica y luego publica el sitio: en Wix nada está activo hasta que publicas.
Wix genera las páginas de producto con su propia plantilla: si el botón acaba al
final de la página, usa data-cabina-target (más abajo).
PrestaShop
Tema y logotipo
Ve a Diseño → Tema y logotipo, y abre los archivos del tema (o usa FTP).
head.tpl
Abre templates/_partials/head.tpl en tu tema activo.
Pega
Pega la etiqueta antes del {/block} de cierre del bloque head.
Vacía la caché
Guarda y vacía la caché en Parámetros avanzados → Rendimiento.
Cualquier otro tema
Encuentra la plantilla
Encuentra la plantilla que produce el <head> de todas las páginas — el nombre
del archivo cambia según la plataforma.
Pega
Pega la etiqueta en cualquier punto dentro de <head>, o justo antes de
</body>.
Una sola vez
Pégala una sola vez. Una segunda copia se detiene sola y avisa en la consola, pero conviene quitarla igualmente.
Recarga
Recarga una página de producto.
Cabina no necesita ninguna variable de plantilla, ningún ID de producto y ningún
marcado adicional. Una etiqueta <script> es toda la integración.
Cómo saber que ha funcionado
Abre una página de producto. Cabina encuentra tu bloque de compra y coloca su botón justo debajo — tú no escribes ningún marcado para esto.
El botón toma su texto y su color de los ajustes de tu panel, y hereda la tipografía de tu tema.
¿Ningún botón? Abre la consola del navegador: Cabina dice por qué, en una línea. Ve a Solución de problemas.
Mover el botón
Cabina busca el bloque de compra con la lista de abajo, en orden, e inserta su botón justo después de la primera coincidencia.
| Punto de anclaje | Plataforma típica |
|---|---|
.product-form__buttons | Shopify |
form[action*="/cart/add"] .product-form__submit | Shopify |
form[action*="/cart/add"] | Shopify |
form.cart | WooCommerce |
.single_add_to_cart_button | WooCommerce |
.product-add-to-cart | PrestaShop |
#add-to-cart-or-refresh | PrestaShop |
En un tema a medida normalmente no coincide ninguno. Entonces el botón se añade al final de la página — bajo el pie de página, fuera de la vista. No hay nada roto: simplemente está en el sitio equivocado.
El remedio es un elemento vacío en tu plantilla de producto, donde quieras el botón:
<div data-cabina-target></div>Ese atributo gana a todos los puntos de anclaje de arriba, y el botón se coloca dentro del elemento, no al lado.
La imagen de la prenda
Cabina lee la prenda directamente de tu página de producto. Prueba, en este
orden: og:image, luego twitter:image, y luego la primera imagen que coincida
con uno de estos selectores:
| Selector de galería | Plataforma típica |
|---|---|
.woocommerce-product-gallery__image img | WooCommerce |
img.wp-post-image | WooCommerce |
.wp-block-woocommerce-product-image img | WooCommerce |
.product__image img | Shopify |
.product-image img | Shopify |
.product-photo img | Shopify |
.product-single__photo img | Shopify |
[data-product-image] img | Shopify |
.product-featured-image img | Shopify |
.product-gallery img | Shopify |
.product-img img | Shopify |
.product__media img | Shopify |
.main-product-image img | Shopify |
Si ninguno de los tres encuentra una imagen, el botón aparece igualmente y la prueba falla a medias. Es el único fallo que tus clientes notan antes que tú.
El remedio general, válido en cualquier plataforma, es emitir una imagen Open Graph en tu plantilla de producto:
<meta property="og:image" content="https://tu-tienda.com/imagenes/producto.jpg">Merece la pena de todos modos: es la misma etiqueta que Facebook, WhatsApp y Slack usan para previsualizar los enlaces a tus productos.
Lo que ve tu cliente
Nada sale de su dispositivo hasta que marca la casilla de consentimiento, y los modelos ya preparados no necesitan ninguna foto.
El texto del botón lo eliges tú en el panel: no es una traducción de Cabina. La interfaz del probador, en cambio, sí sigue el idioma de la página.
Para agentes de IA
El mismo contrato, escrito para una máquina y servido como markdown puro — sin capturas, y además con un árbol de decisión y los comandos para verificar una instalación desde el terminal: cabina.io/en/docs/agent.md .