# App embed de Shopify: qué es y cómo se activa

> Qué es un app embed de Shopify, en qué se diferencia de un app block, por qué viene desactivado tras instalar la app y cómo comprobar que funciona.

URL: https://clione.ai/es/glosario/app-embed-shopify/
Lang: es

Instalas una app de reseñas, de chat o de [datos estructurados](/es/glosario/datos-estructurados/), la app dice que está lista y en la tienda no aparece nada. Muchas veces la razón tiene nombre: **la app está instalada, pero su app embed está apagado**. Un app embed no es la app ni el código de tu tema. Es la pieza que la app deja preparada para meter su código en todas las páginas, y que solo funciona cuando tú la enciendes. Su pariente, el _app block_, es otra cosa: un bloque que colocas dentro de una sección, en un sitio concreto de la página.

## Cómo funciona

Los app embeds forman parte de las extensiones de tema de una app (_theme app extensions_), el mecanismo con el que Shopify deja que el comerciante añada elementos dinámicos a su tema **sin tocar las plantillas [Liquid](/es/glosario/liquid/) ni el código**.[^shopify-tae] Hay dos tipos de bloque:[^shopify-tae-config]

- **App blocks.** Se colocan dentro de una sección, así que necesitan plantillas JSON y secciones que acepten bloques de tipo `@app`.
- **App embeds.** Los usan las apps que no tienen una parte visible o que añaden elementos flotantes o superpuestos. Shopify los renderiza y los inserta **antes de las etiquetas de cierre `</head>` y `</body>`**, según el destino que declare el bloque: `head`, `body` o `compliance_head`.

Como no dependen de secciones ni de plantillas JSON, los app embeds funcionan **tanto en temas antiguos (_vintage_) como en Online Store 2.0**.[^shopify-tae-config] La ayuda de Shopify los describe para el comerciante como elementos que flotan o se superponen en el tema, o que añaden código a la tienda sin que el cliente lo vea, como una burbuja de chat o una herramienta de analítica.[^shopify-help-apps]

El detalle que más soporte genera: **después de instalar la app, sus app embeds están desactivados**. El comerciante tiene que activarlos en el editor de temas, en la configuración del tema, apartado «App embeds».[^shopify-tae-config] La app puede ayudar con un enlace directo al editor que abre el bloque ya activado, con el parámetro `activateAppId`.[^shopify-tae-config] Y Shopify recomienda a los desarrolladores que expliquen cómo activar y desactivar cada app embed, con capturas, vídeo o texto, y que ofrezcan ese enlace directo.[^shopify-tae-ux]

Por dentro, cada bloque es un archivo Liquid en la carpeta `blocks/` de la extensión, junto a `assets/` para el CSS y el JavaScript, `snippets/` y `locales/`. Un bloque puede mostrarse solo si se cumple una condición (`available_if`), que lee un [metafield](/es/glosario/metafields/) booleano de la app. Y hay límites: **30 bloques por extensión, 10 MB en total y 100 KB de Liquid** sumando todos los archivos.[^shopify-tae-config]

Existen para resolver un problema viejo. Antes, una app editaba el código del tema o le inyectaba scripts, y al desinstalarla esas ediciones se quedaban: lo que Shopify llama **código fantasma**, que puede causar problemas de calidad y de rendimiento.[^shopify-tae-migrate] Con las extensiones de tema, al desinstalar una app sus bloques se retiran del tema automáticamente y por completo.[^shopify-tae-ux]

## En una tienda

Un **ejemplo ficticio**: una app que publica datos estructurados en la cabecera de cada ficha. Su bloque, en la carpeta `blocks/` de la extensión, declara que va en el `head`:

```liquid
{% comment %} blocks/datos-estructurados.liquid (ejemplo ficticio) {% endcomment %}
<script type="application/ld+json">
  {% comment %} aquí la app escribe el JSON-LD de la ficha {% endcomment %}
</script>

{% schema %}
{
  "name": "Datos estructurados",
  "target": "head",
  "settings": []
}
{% endschema %}
```

Mientras el comerciante no lo active, ese `<script>` no aparece en ninguna página. Cuando lo activa y guarda, Shopify lo coloca antes de `</head>`, con lo que el [JSON-LD](/es/glosario/json-ld/) queda en la cabecera de la [ficha de producto](/es/glosario/ficha-de-producto/) sin que nadie haya editado `theme.liquid`.

Es el mismo reparto que usa Clione en Shopify: escribe las señales de cada producto en metafields y las pinta con dos app embeds, «Clione SEO», con el grafo de datos estructurados en el `head`, y «Clione FAQ», con el acordeón de preguntas en el `body`, que se activan desde el panel de Clione con un clic.


**Instalada no es activa, y activa en un tema no es activa en otro.** Tras instalar la app, el app embed viene apagado.[^shopify-tae-config] Y si cambias el tema publicado, las apps que activaste en el anterior no estarán activas en el nuevo: hay que volver a encenderlas. Además, los cambios se aplican a la configuración por defecto de la tienda salvo que antes elijas un mercado concreto.[^shopify-help-apps]


## Cómo comprobarlo

1. **Abre el editor de temas del tema publicado** y pulsa el icono «App embeds» de la barra lateral. Busca la app y mira si el interruptor está encendido. Si lo cambias, guarda.[^shopify-help-apps]
2. **Si vendes en varios mercados**, comprueba qué mercado estaba seleccionado: sin elegir ninguno, el cambio va a la configuración por defecto de la tienda.[^shopify-help-apps]
3. **Abre una ficha y su código fuente** (Ctrl+U en Chrome) y busca el código de la app antes de `</head>` o de `</body>`, según dónde dice la app que trabaja.[^shopify-tae-config]
4. **Si el bloque publica datos estructurados**, pasa la URL por la [prueba de resultados enriquecidos](/es/glosario/prueba-de-resultados-enriquecidos/) o por un [validador de schema](/es/glosario/validador-de-schema/) para ver que se leen sin errores.
5. **Cada vez que cambies de tema, repite los pasos 1 y 3.** El nuevo tema no hereda las apps activadas en el anterior.[^shopify-help-apps]

## Concepto cercano: widget de BigCommerce

En BigCommerce, lo más parecido es el [widget de BigCommerce](/es/glosario/widget-bigcommerce/). Un widget es una unidad de contenido en HTML, CSS y JavaScript, sobre una plantilla Handlebars, que se coloca con la Widgets API en una región concreta de un tema [Stencil](/es/glosario/stencil/) y **se renderiza como parte del HTML de la tienda**.[^bc-widgets] La diferencia práctica está en el sitio. Un app embed va al final del `head` o del `body` de la página, y lo activa el comerciante con un interruptor. Un widget va a la región y a la página que diga su _placement_, que se crea por API.[^bc-widgets]

La guía [del metafield a la página publicada](/es/guias/metafield-a-pagina-publicada/) sigue un dato de Shopify hasta el HTML de la ficha, y la [ruta de publicación por plataforma](/es/aprender/publicacion-por-plataforma/) ordena el resto de términos.