# Instalar FlowConsent en Shopify

Instalar FlowConsent en Shopify: pegue el fragmento de código en theme.liquid justo después de <head> y desactive el banner de cookies y los píxeles nativos.

> Canonical: https://www.flowconsent.com/es/doc/install-shopify
> Last updated: 2026-10-01
En Shopify, el fragmento de código de FlowConsent va en el archivo **`theme.liquid`** de su tema, **justo después de la etiqueta `<head>`** y por tanto antes de `{{ content_for_header }}`. Se accede desde **Tienda online → Temas → … → Editar código** (*Online Store → Themes → … → Edit code*). La instalación son tres pasos. La trampa principal: Shopify tiene su propio banner de cookies, y los canales de venta Google & YouTube y Facebook & Instagram inyectan sus píxeles fuera del tema, donde su fragmento de código no puede retenerlos.

## Antes de empezar

- Una cuenta en [app.flowconsent.com](https://app.flowconsent.com) (plan Free gratuito, sin tarjeta de crédito, hasta 25.000 sesiones al mes).
- Un banner creado y desplegado. En el plan Free, el despliegue se hace a través de su propia cuenta de Cloudflare ([guía de Cloudflare](/es/doc/cloudflare-deployment)); en Pro y Enterprise, con un clic.
- Acceso al panel de Shopify con permiso para editar temas.

## Paso 1: Copie el fragmento de código

Abra **Builder → Despliegue → Integración** y copie el fragmento de código de la pestaña **HTML / No-code**. Tiene dos partes, en este orden: el stub de Google Consent Mode v2 (valores `denied` por defecto) y después el cargador del banner.

## Paso 2: Péguelo en theme.liquid

1. En el panel de Shopify, vaya a **Tienda online → Temas** (*Online Store → Themes*).
2. Por precaución, duplique antes el tema: Shopify lo recomienda para conservar una copia de seguridad.
3. En el tema publicado, haga clic en el icono **…** y después en **Editar código** (*Edit code*).
4. En la carpeta **Layout**, abra **`theme.liquid`**.
5. Pegue el fragmento de código **justo después de la etiqueta de apertura `<head>`**, por encima de `{{ content_for_header }}` y de cualquier otro script, y haga clic en **Guardar**.

```html title="Layout → theme.liquid"
<head>
  <script>
  // FlowConsent Loader - COLOCAR ANTES de cualquier otro script en el <head>
  window.dataLayer=window.dataLayer||[];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent','default',{
    'ad_storage':'denied',
    'analytics_storage':'denied',
    'ad_user_data':'denied',
    'ad_personalization':'denied',
    'wait_for_update':500
  });
  gtag('set','url_passthrough',true);
  gtag('set','ads_data_redaction',true);
  </script>
  <!-- FlowConsent CMP -->
  <script src="https://SU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=SU_CODIGO_LICENCIA"></script>

  <meta charset="utf-8">
  <!-- … el resto del <head> de su tema, incluido {{ content_for_header }} -->
</head>
```

El objeto `{{ content_for_header }}` carga los scripts que Shopify y las aplicaciones añaden a la tienda, así que el fragmento de código tiene que ir **antes**. Todo lo que quede por encima del fragmento escapa al bloqueo previo.

> [!NOTE]
> Una actualización del tema desde la Theme Store puede no conservar sus cambios en el código. Después de cada actualización, compruebe que el fragmento sigue al principio de `theme.liquid`.

## Paso 3: Neutralice el banner y los píxeles nativos de Shopify

Los rastreadores ya no deben inyectarse desde Shopify, porque se dispararían sin tener en cuenta FlowConsent.

**Los canales Google & YouTube y Facebook & Instagram.** Estas aplicaciones instalan *píxeles de aplicación* que se gestionan en **Configuración → Eventos del cliente** (*Settings → Customer events*). Se ejecutan en un entorno aislado de Shopify, fuera de su tema: su fragmento de código no puede retenerlos. Siguen el consentimiento registrado a través de la **Customer Privacy API** de Shopify, no el banner de FlowConsent. Para que todo pase por FlowConsent, desactive el uso compartido de datos de esos canales (o elimine los ID de medición que haya introducido en ellos) y declare Google Analytics, Google Ads o Meta Pixel en **Builder → Servicios**: el banner solo los carga tras el consentimiento.

**El banner nativo de Shopify.** Dos banners en la misma tienda son dos consentimientos contradictorios. Cuando sus rastreadores estén declarados en FlowConsent, elimine el de Shopify: **Configuración → Privacidad del cliente → Banner de cookies** (*Settings → Customer privacy → Cookie banner*) y después **Más acciones → Eliminar banner de cookies** (*More actions → Remove cookie banner*).

> [!WARNING]
> El checkout no ejecuta el código de su tema: `theme.liquid` no se aplica al pago ni a las páginas de agradecimiento y de estado del pedido, y Shopify ha retirado los antiguos «scripts adicionales». Por eso el banner de FlowConsent no aparece durante el pago. No pegue rastreadores en esos lugares: el seguimiento de conversiones pasa por los **Eventos del cliente** de Shopify, que también dependen de la Customer Privacy API.

Si usa Google Tag Manager en el tema, no cargue FlowConsent desde GTM (llegaría demasiado tarde): mantenga el fragmento de código **por encima** del contenedor de GTM en `theme.liquid`. Más detalles en la [guía de Google Consent Mode](/es/doc/google-consent-mode).

## Verifique la instalación

1. Abra la tienda en una ventana privada: el banner aparece.
2. En la pestaña **Red** de las herramientas para desarrolladores, no sale ninguna petición a Google, Meta ni a otro tercero antes de hacer clic en **Aceptar**.
3. Lance el [asistente de instalación](/es/doc/setup-wizard) (Builder → Integración): comprueba la página publicada (cargador presente con el código de licencia correcto, stub de Consent Mode presente y colocado antes de cada etiqueta de Google).
4. Termine con un escaneo de rechazo desde la pestaña **Conformidad** ([verificación de conformidad](/es/doc/compliance-verification)).

## Hacerlo desde su agente de IA (MCP)

FlowConsent tiene un servidor MCP oficial, `https://mcp.flowconsent.com`, que se puede usar desde Claude, ChatGPT o cualquier cliente MCP. La conexión se hace con OAuth 2.0 y su cuenta de FlowConsent, sin clave de API. Su agente obtiene el fragmento de código y las instrucciones de colocación (`get_banner_snippet`, `get_setup_instructions`), verifica la instalación con un escaneo real (`verify_consent_compliance`) y puede programar una supervisión recurrente (`monitor_compliance`). Pegar el fragmento en `theme.liquid` le corresponde a usted: el servidor MCP aporta el fragmento, las instrucciones y la verificación.

Ejemplo de petición:

> Deme el fragmento de código de mi banner para mi tienda Shopify y compruebe que está bien instalado en https://mitienda.es

Más información: [servidor MCP](/es/doc/mcp-server) y [FlowConsent para agentes de IA](/es/mcp).

## Preguntas frecuentes

### ¿Se puede instalar FlowConsent sin editar el código del tema?

El código del tema es el método fiable, porque es el único que garantiza que el fragmento se ejecute antes de `{{ content_for_header }}`. Los bloques de código añadidos desde el editor de temas acaban en el cuerpo de la página, demasiado tarde para el bloqueo previo.

### ¿Por qué Google Analytics sigue enviando datos tras un rechazo?

Casi siempre porque el canal Google & YouTube (u otro píxel de aplicación) sigue activo en **Eventos del cliente**. Ese píxel no pasa por su tema: desactive el uso compartido de datos de ese píxel y declare Google Analytics en **Builder → Servicios**.

### ¿El banner aparece durante el pago?

No. El checkout de Shopify no ejecuta el código del tema. El visitante elige en la tienda, antes de llegar al pago.

### ¿Hay que eliminar el banner de cookies de Shopify?

Sí, cuando sus rastreadores estén declarados en FlowConsent: dos banners recogerían dos decisiones contradictorias. Shopify avisa de que, tras eliminarlo, es posible que los propios píxeles de Shopify dejen de recoger datos no esenciales, algo esperado porque el seguimiento pasa ahora por FlowConsent.