¿Qué es un app embed de Shopify y cómo se activa?

Instalas una app de reseñas, de chat o de 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 ni el código.⁠^{[1]Shopify Dev Docs. About theme app extensions} Hay dos tipos de bloque:⁠^{[2]Shopify Dev Docs. Configure theme app extensions}

• 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.⁠^{[2]Shopify Dev Docs. Configure theme app extensions} 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.⁠^{[3]Shopify Help Center. Extend your theme with 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».⁠^{[2]Shopify Dev Docs. Configure theme app extensions} La app puede ayudar con un enlace directo al editor que abre el bloque ya activado, con el parámetro activateAppId.⁠^{[2]Shopify Dev Docs. Configure theme app extensions} 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.⁠^{[4]Shopify Dev Docs. UX for theme app extensions}

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 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.⁠^{[2]Shopify Dev Docs. Configure theme app extensions}

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.⁠^{[5]Shopify Dev Docs. Migrate to theme app extensions} Con las extensiones de tema, al desinstalar una app sus bloques se retiran del tema automáticamente y por completo.⁠^{[4]Shopify Dev Docs. UX for theme app extensions}

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:

{% 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 queda en la cabecera de la 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.

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.⁠^{[3]Shopify Help Center. Extend your theme with 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.⁠^{[3]Shopify Help Center. Extend your theme with 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.⁠^{[2]Shopify Dev Docs. Configure theme app extensions}
4. Si el bloque publica datos estructurados, pasa la URL por la prueba de resultados enriquecidos o por un 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.⁠^{[3]Shopify Help Center. Extend your theme with apps}

Concepto cercano: widget de BigCommerce

En BigCommerce, lo más parecido es el widget de 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 y se renderiza como parte del HTML de la tienda.⁠^{[6]BigCommerce Dev Center. Widgets API} 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.⁠^{[6]BigCommerce Dev Center. Widgets API}

La guía del metafield a la página publicada sigue un dato de Shopify hasta el HTML de la ficha, y la ruta de publicación por plataforma ordena el resto de términos.