Cómo instalar el banner de cookies en Shopify

En Shopify, el banner se instala en el archivo theme.liquid del tema. Es la plantilla base: todas las páginas de la tienda se generan a través de ella. Pegas el fragmento una vez y aparece en toda la tienda. Antes, conviene resolver dos cosas: si el tema carga jQuery y qué hacer con el banner propio de Shopify.

Antes de empezar

• Ten a mano el token de la web: lo ves en el panel, en la ficha de la web.
• Duplica el tema antes de tocar el código. Shopify lo recomienda: si algo sale mal, vuelves a la copia.
• Revisa si hay apps de cookies instaladas. Si las hay, desinstálalas: dos banners se pisan.
• Apunta qué etiquetas de analítica o publicidad están pegadas a mano en el tema. Habrá que quitarlas o moverlas al banner.

Paso 1: abre el editor de código

1. En el panel de Shopify, entra en Tienda online.
2. En el tema actual, abre el menú de los tres puntos y elige Editar código.
3. En la carpeta layout, abre theme.liquid.

Paso 2: comprueba si el tema carga jQuery

El cargador del banner necesita jQuery con el atajo $. Muchos temas actuales no lo cargan.

1. Abre la tienda en el navegador.
2. Abre las herramientas de desarrollo y ve a la consola.
3. Escribe typeof jQuery y pulsa Intro.

Si responde "function", el tema ya carga jQuery y puedes saltar al paso 4. Si responde "undefined", sigue con el paso 3.

Paso 3: sube jQuery como recurso del tema

1. Descarga desde jquery.com la versión comprimida de la rama 3.x: jquery-3.7.1.min.js. La 4.0, publicada en enero de 2026, eliminó funciones antiguas que algunos scripts todavía usan.
2. En el editor de código, haz clic derecho sobre la carpeta assets y elige Subir....
3. Selecciona el archivo y súbelo.

Así jQuery se sirve desde la propia tienda, sin depender de otro dominio.

Paso 4: pega el fragmento en theme.liquid

Busca la etiqueta </body> al final de theme.liquid y pega esto justo antes. Cambia TU_TOKEN por el token de la web. Si en el paso 2 viste que el tema ya carga jQuery, omite la primera línea.

{{ 'jquery-3.7.1.min.js' | asset_url | script_tag }}
<script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.jQuery && typeof window.$ !== 'function') { window.$ = window.jQuery; }
  var s = document.createElement('script');
  s.async = true;
  s.id = 'cookies-token';
  s.src = 'https://cookies.sslcamaltec.com.es/cookies/cookie-loader.nojq.min.js?tokencookies=TU_TOKEN';
  document.body.appendChild(s);
});
</script>

La primera línea es Liquid: genera la etiqueta <script> que carga jQuery desde la carpeta assets. Sin defer ni async, así que jQuery está listo antes que el banner. Guarda el archivo.

Si no puedes subir archivos al tema, hay una variante del cargador que ya incluye jQuery: cambia cookie-loader.nojq.min.js por cookie-loader.js en la URL. Úsala solo en ese caso. Pesa unos 530 KB sin minificar.

Paso 5: evita dos banners

Shopify tiene su propio banner de cookies. En las tiendas nuevas se activa por defecto para visitantes del Reino Unido y del Espacio Económico Europeo, si esos mercados están activos. Si lo dejas, el visitante verá dos avisos.

1. Ve a Configuración > Privacidad del cliente.
2. Entra en Banner de cookies.
3. Elige Más acciones > Eliminar banner de cookies y confirma.

Si tenías activada Usar configuración automatizada, revisa que el banner no vuelva a aparecer.

Las herramientas de Shopify, como sus píxeles, leen el consentimiento a través de la Customer Privacy API, y Shopify pide que un banner de terceros esté integrado con ella. El nuestro lo está, sin pegar nada más: cuando el visitante acepta, rechaza o cambia su elección, el banner se la pasa a Shopify. Así los píxeles de Shopify y las apps de marketing que usan esa API respetan la misma decisión.

La elección solo se envía a Shopify cuando el visitante pulsa un botón del banner, nunca de forma automática al cargar la página, como exige Shopify.

Paso 6: quita las etiquetas pegadas en el tema

El banner no bloquea lo que está pegado directamente en el HTML. Si theme.liquid u otra plantilla lleva el código de Google Analytics, del píxel de Meta o de Google Tag Manager, quítalo. Para GTM, pon el ID del contenedor en el panel, como explica la guía de Google Tag Manager.

Cómo comprobar que funciona

1. Abre la tienda en una ventana privada. El banner debe salir en la portada, en un producto, en el carrito y en las páginas legales.
2. Antes de elegir, revisa las cookies y las peticiones en las herramientas de desarrollo. No debe haber _ga ni peticiones a google-analytics.com, googletagmanager.com o facebook.com.
3. Pulsa «Rechazar» y recarga. Sigue sin haber nada de analítica ni de publicidad.
4. Tras la primera elección debe aparecer el icono para reabrir la configuración.
5. Comprueba que Shopify recibe la elección. Abre la consola y escribe Shopify.customerPrivacy.currentVisitorConsent(). Si has rechazado, analytics, marketing y preferences deben valer "no". Si has aceptado, "yes".
6. Si quieres un informe, pide la auditoría gratuita.

Problemas frecuentes

Si la tienda usa Consent Mode, sigue con configurar Consent Mode. El resto de guías están en la ayuda.

Preguntas frecuentes

¿Los píxeles de Shopify respetan la elección del visitante?

Sí. El banner está integrado con la Customer Privacy API: cuando el visitante acepta o rechaza, pasa esa elección a Shopify, y sus píxeles y las apps que usan esa API la respetan.

¿Aparece el banner en el proceso de pago de Shopify?

No. El pago no se genera con theme.liquid, así que el fragmento no llega a esas páginas. El banner cubre la tienda: portada, colecciones, productos, carrito y páginas legales.

¿Pierdo el fragmento si actualizo el tema?

Puede pasar. Shopify avisa de que los cambios de código pueden no sobrevivir a una actualización del tema. Tras actualizar, revisa theme.liquid y vuelve a pegarlo si hace falta.

¿Puedo tener a la vez el banner de Shopify y el vuestro?

No es buena idea. El visitante vería dos avisos y cada uno guardaría su propia elección. Quita el de Shopify desde Configuración > Privacidad del cliente.

Fuentes

1. Editar el código del tema (Centro de ayuda de Shopify)
2. Configurar la privacidad del cliente (Centro de ayuda de Shopify)
3. Customer Privacy API (Shopify.dev)
4. Layouts (Shopify.dev)
5. Filtro script_tag de Liquid (Shopify.dev)
6. Versiones de jQuery (jQuery CDN)