Docs  /  Integraciones  /  Instalar el plugin de Shopify

Instalar el plugin de Shopify

Última actualización: 20. octubre 2026

Con la aplicación configento.app de la Shopify App Store, usted muestra sus configuradores directamente en sus páginas de producto de Shopify. Sus clientes componen su producto, ven el precio y la imagen del producto con cada elección y compran a través del checkout habitual de Shopify. La configuración aparece en el carrito, en el checkout, en el pedido y en la confirmación del pedido.

En la tienda siempre funciona el motor de frontend V3, independientemente de lo que esté configurado en el componente. Lo que V3 hace de forma distinta a Legacy se describe en Motor de frontend: Legacy o V3.

Requisitos

  • Una tienda Shopify con un tema que admita bloques de aplicación (Online Store 2.0, p. ej. Dawn, Horizon, Sense, Refresh, Origin y la mayoría de los temas actuales).
  • No necesita Shopify Plus: la aplicación funciona con todos los planes de Shopify.
  • No necesita una cuenta de configento.app de antemano. Puede hacer que se cree durante la configuración o conectar una existente.

Instalación

  1. Abra la aplicación configento.app en la Shopify App Store e instálela.
  2. Confirme los permisos que le muestra Shopify.
  3. A continuación, Shopify abre la aplicación en el administrador de Shopify. Más adelante la encontrará siempre entre sus aplicaciones como configento.app.

Arriba a la derecha en la aplicación, el enlace Guía de configuración lleva a este artículo.

La aplicación de un vistazo

La aplicación tiene cuatro pestañas:

Pestaña Para qué sirve
Configuración Suscripción, conexión con su cuenta de configento.app, componentes de ejemplo
Productos Qué producto muestra qué componente
Precios Moneda, impuestos y conversión entre configento.app y Shopify
Bloque de tema Activar el configurador y la extensión del carrito en el tema, adaptar la confirmación del pedido

Productos, Precios y Bloque de tema solo se pueden pulsar una vez conectada una cuenta. A partir de ese momento, la pestaña Configuración muestra una marca de verificación.

La aplicación aparece en el idioma que tenga configurado en el administrador de Shopify (alemán, inglés, español o francés; en otro caso, inglés). Los mensajes de error del servidor, como «invalid or expired code», aparecen por ahora siempre en inglés.

Paso 1: Elegir un plan

Sin una suscripción activa, la aplicación muestra en lugar de las pestañas el aviso Suscripción necesaria: «No hay ninguna suscripción activa de Configento para esta tienda. Elige un plan para usar el configurador: los primeros 14 días son gratuitos.»

Haga clic en Elegir un plan. Shopify abre la página de planes, donde usted confirma el plan. La facturación se realiza a través de su factura de Shopify. La suscripción desbloquea el conjunto de funciones Professional.

Sin una suscripción activa, el configurador tampoco se carga en la tienda.

Paso 2: Conectar su cuenta de configento.app

En la pestaña Configuración, la aplicación pregunta: ¿Ya utilizas Configento?

Todavía sin cuenta

Haga clic en No, crear una cuenta ahora. configento.app crea su cuenta y envía una invitación a la dirección de correo electrónico de su tienda Shopify. Con la invitación, usted define su contraseña para el portal de servicio. Suele tardar solo un momento; después haga clic en Volver a cargar.

Cuenta existente

Haga clic en Sí, ya tengo una cuenta. Necesita un código de conexión de 6 dígitos:

  1. Abra el portal de servicio (service.configento.app) e inicie sesión.
  2. En el servicio al que debe asignarse la tienda, haga clic en Gestionar. Se abre el admin.
  3. Vaya a Ajustes → Integraciones y desplácese hasta la tarjeta Shopify.
  4. Si tiene varios servicios, seleccione el correcto en Vincular tienda Shopify con el pedido de servicio.
  5. Haga clic en Generar código de conexión. El Código de vinculación es válido durante 24 horas (Válido hasta).
  6. Pegue el código en la aplicación y haga clic en Conectar.

A continuación, la pestaña Configuración muestra «Vinculado al cliente de Configento ….»

Importante: la suscripción de Shopify es un servicio propio dentro de su cuenta de cliente. Si conecta una cuenta existente, el portal de servicio crea para ello un servicio nuevo con su propio espacio de trabajo, vacío al principio; la aplicación trabaja después con ese espacio de trabajo. Sus componentes anteriores permanecen en su servicio. Si los necesita en la tienda, expórtelos allí e impórtelos en el nuevo espacio de trabajo con Importar ZIP (consulte Crear su primer componente).

Una tienda siempre está conectada con exactamente una cuenta. Si debe pertenecer a otra, desinstale la aplicación y vuelva a instalarla.

Paso 3: Componentes de ejemplo (opcional)

Si su espacio de trabajo todavía está vacío, la pestaña Configuración pregunta: «¿Añadimos cuatro componentes de ejemplo?» Con Sí, añadirlos obtiene cuatro componentes: imagen de producto combinada, características combinadas con fórmulas, un conjunto de reglas e iconos gráficos. Se publican automáticamente; esto tarda un momento. Después puede asignarlos en la pestaña Productos y editarlos o eliminarlos en el admin como cualquier otro componente.

Sus propios componentes los crea en el admin, que abre desde el portal de servicio con Gestionar. Solo puede asignar componentes publicados; consulte Crear su primer componente.

Paso 4: Asignar productos

En la pestaña Productos:

  1. Busque el nombre del producto en Añadir un producto.
  2. En la fila del producto, elija el componente (Elegir componente…) y haga clic en +.
  3. El producto aparece arriba en Productos con configurador. Allí puede cambiar el componente o quitar la asignación con −.

Los cambios se guardan de inmediato. Shopify guarda en caché las páginas de la tienda durante unos minutos, por lo que una asignación nueva aparece con un pequeño retraso.

Justo después de la instalación, Shopify crea un índice para las asignaciones. Mientras tanto, la pestaña muestra «Shopify está preparando el índice de productos para esta aplicación.» y todavía no lista productos. Las asignaciones ya realizadas se conservan. Vuelva a cargar la página después de unos minutos o haga clic en Comprobar de nuevo.

Asignar sin la aplicación: la asignación es un metacampo de producto. En el administrador de Shopify lo encuentra en el producto como Configento Component ID (namespace configento, clave component_id). Como valor, introduzca el ID de un componente publicado. Los productos sin este valor no muestran ningún configurador.

Paso 5: Configurar el tema

En la pestaña Bloque de tema activa dos cosas, una vez por tema. Junto a cada punto se indica si está Activo o No activado en su tema publicado.

Bloque del configurador

  1. Haga clic en Añadir el bloque del configurador. Shopify abre el editor de temas con la plantilla de producto y añade el bloque Configento Configurator.
  2. Shopify coloca los bloques nuevos al final. No importa: con el ajuste Colocar automáticamente el configurador sobre el precio (por defecto: activado), el configurador se coloca al cargar justo delante del precio. Como alternativa, arrastre el bloque por encima del botón «Añadir al carrito».
  3. Guardar.

Ajustes del bloque en el editor de temas:

Ajuste Por defecto Significado
URL del backend de Configento https://admin.configento.app Cámbielo solo si Configento le indica expresamente otro host
Selector CSS del precio del tema (opcional) vacío Vacío = detección automática (Dawn, Sense, Refresh, Origin, Horizon y la mayoría de los temas premium). Separe varios selectores con comas
Selector CSS de la galería de imágenes (opcional) vacío Vacío = detección automática (Dawn y temas derivados). Allí la imagen de producto combinada sustituye la foto del producto mientras el componente aporte capas de imagen
Colocar automáticamente el configurador sobre el precio activado Coloca el bloque delante del elemento de precio al cargar, esté donde esté en el editor de temas
Mostrar resumen de la configuración desactivado Muestra bajo el configurador un resumen de la selección. Se añade al pedido en cualquier caso
Texto de carga (déjalo vacío para el idioma automático) vacío Vacío = «Cargando configurador …» en el idioma de la tienda (DE, EN, ES, FR; en otro caso, inglés)

El configurador adopta la fuente, los colores y los radios de las esquinas de los temas de la familia Dawn.

Extensión del carrito «Configento Cart»

Configento Cart es una inserción de aplicación. En el carrito y en el carrito lateral muestra, para cada línea configurada, la imagen de la configuración, las elecciones del comprador y un enlace Editar. Además, transmite la imagen de la configuración al checkout, al pedido y a la confirmación del pedido.

En Shopify, las inserciones de aplicación están desactivadas hasta que usted las activa; la aplicación no puede hacerlo por sí misma.

  1. Haga clic en Activar Configento Cart. Shopify abre el editor de temas con la inserción ya activada.
  2. Guardar.

El interruptor se aplica por tema. Tras un cambio de tema o una reinstalación de la aplicación, vuelva a activarlo. Si está desactivado, la pestaña avisa: «“Configento Cart” no está activado en tu tema publicado.»

Sin Configento Cart, la compra funciona igualmente: el precio y la configuración son correctos. Sin embargo, el carrito, el checkout y el pedido muestran entonces la foto del producto en lugar de la imagen de la configuración, y no hay enlace Editar.

Paso 6: Imagen en la confirmación del pedido (opcional)

La confirmación del pedido por correo electrónico contiene la configuración automáticamente. Sin embargo, la imagen del producto que aparece en ella procede de la plantilla de correo de su tienda, y una aplicación no puede modificarla. Para que aparezca la imagen de la configuración en lugar de la foto del producto, adapte la plantilla una vez. La pestaña Bloque de tema le guía por los pasos en Imagen de la configuración en la confirmación del pedido (opcional) y le ofrece los textos para Copiar:

  1. Editar confirmación de pedido abre el código de la plantilla.
  2. Busque en el código (Ctrl+F / Cmd+F) esta línea: {% if parent_line_item and parent_line_item.image %}
  3. Sustituya cada aparición de esta línea por el siguiente bloque. La plantilla estándar contiene la línea varias veces, una por cada sección de entrega.
{%- comment -%} Configento: show the configuration's combined image {%- endcomment -%}
{%- assign configento_image = '' -%}
{%- for configento_part in line_item_group.components -%}
  {%- for configento_prop in configento_part.properties -%}
    {%- if configento_prop.first == '_configento_image' -%}{%- assign configento_image = configento_prop.last -%}{%- endif -%}
  {%- endfor -%}
{%- endfor -%}
{% if configento_image != blank %}
  <img src="{{ configento_image }}{% if configento_image contains '?' %}&{% else %}?{% endif %}width=120&height=120&crop=center" align="left" width="60" height="60" class="order-list__product-image" alt="">
{% elsif parent_line_item and parent_line_item.image %}
  1. Guarde la plantilla. La próxima confirmación del pedido muestra la imagen de la configuración.

Si no encuentra la línea, su plantilla ha sido modificada. En ese caso, su desarrollador o el soporte de Configento coloca el bloque en el lugar donde se muestra la imagen de producto de un bundle.

Autorizar su propio dominio

Al conectar, la aplicación registra automáticamente la dirección de Shopify de su tienda (….myshopify.com) como dominio autorizado. Si su tienda funciona con un dominio propio, regístrelo usted mismo: en el admin, en Ajustes → Dominios con Añadir dominio, modo Producción. De lo contrario, el configurador no se carga en ese dominio. Más información: Configuración global.

Precios, moneda e impuestos

Normalmente no necesita tocar la pestaña Precios. En cada llamada, la aplicación lee en directo desde Shopify la moneda y la visualización de impuestos de su tienda y convierte en consecuencia. En Moneda e impuestos, la pestaña muestra ambos lados uno junto al otro: Configento (fuente de precios) y Shopify (tienda, en vivo).

  • Impuestos: si su tienda muestra los precios sin impuestos, los recargos llegan a la tienda sin impuestos y Shopify añade los impuestos al pagar. Si su tienda muestra los precios con impuestos, la aplicación utiliza el tipo impositivo que Shopify calcula para este producto. Si no se puede determinar, los precios se mantienen en la base con la que se crearon en el componente.
  • Moneda: si ambos lados usan la misma moneda, no se convierte nada («Ambos lados usan EUR. No se necesita conversión.»). Con monedas distintas, la aplicación toma el tipo de cambio de Shopify Markets.
  • Tipo de cambio manual: solo se usa si Shopify Markets no proporciona ningún tipo. Con la misma moneda no tiene efecto, y la pestaña lo indica. Lo elimina con Quitar el valor manual.

El recargo en el carrito corresponde al importe que el configurador muestra en la página de producto.

Lo que ve el comprador

  1. Página de producto: el configurador se carga con el producto. Hasta que está listo, el botón del carrito está bloqueado; así ningún producto llega al carrito sin configuración. El precio y, si el componente tiene capas de imagen, la imagen de producto combinada en la galería siguen cada elección.
  2. Añadir al carrito: la configuración se guarda y la línea se crea con el precio completo. La imagen de la configuración se añade aproximadamente medio minuto después (a través de Configento Cart).
  3. Carrito: imagen de la configuración, las elecciones y el enlace Editar. El enlace lleva de vuelta a la página de producto con la selección anterior; al volver a añadirlo, la nueva configuración sustituye la línea anterior.
  4. Checkout: una línea con el título «Producto – Valor, Valor, …». Desplegada, muestra sus componentes: el producto al precio base y Configuración con el recargo. Los métodos de pago, códigos de descuento y demás funciones de Shopify no cambian.
  5. Confirmación del pedido: la línea con la configuración en el título y sus componentes, con la imagen de la configuración si ha realizado el paso 6.

El pedido en el administrador de Shopify

Un pedido configurado muestra sus componentes: el producto al precio base y la línea Configuración con el recargo. Las elecciones del comprador figuran como propiedades en la línea Configuración.

Lo que la aplicación crea en su tienda

  • Dos productos en borrador «Configuración» (nombre en el idioma principal de su tienda: Konfiguration, Configuration, Configuración): llevan el recargo en el carrito, uno para productos que requieren envío y otro para productos que no. No son visibles en la tienda. No los elimine, publique ni cambie de nombre.
  • Imágenes de las configuraciones (configento-….png) en los archivos de su tienda. El carrito y el checkout solo muestran imágenes alojadas por el propio Shopify; por eso la aplicación guarda allí cada imagen de configuración.
  • Metacampos: Configento Component ID en los productos asignados y metacampos de la tienda para los dos productos de recargo.

Permisos: la aplicación lee y escribe productos (asignación, productos de recargo), transformaciones del carrito (recargo), pedidos en borrador (solo para calcular el tipo impositivo; no se crean borradores) y archivos (imágenes de configuración), y lee los idiomas de su tienda. Si una actualización añade un permiso, usted lo confirma la próxima vez que abra la aplicación.

Facturación y tokens de IA

  • La suscripción se gestiona a través de Shopify y aparece en su factura de Shopify. En el portal de servicio, el servicio no tiene Cambiar servicio ni Cancelar servicio; consulte Portal de servicio.
  • Tokens de IA: la suscripción incluye una cuota mensual para el asistente IA. No puede comprar tokens adicionales para un servicio contratado a través de Shopify. Más sobre los tokens: Tokens de IA.

Desinstalar y volver a instalar

En Shopify no existe un botón de cancelación propio: con la desinstalación de la aplicación termina la suscripción, Shopify deja de facturar y el servicio se da de baja en el portal de servicio.

Al desinstalar, Shopify elimina todo lo que pertenece a la aplicación en la tienda: inserciones, transformación del carrito, metacampos de la tienda. Las asignaciones en sus productos se mantienen.

Tras una reinstalación:

  1. vuelva a elegir un plan,
  2. vuelva a conectar una cuenta (también puede ser otra),
  3. vuelva a activar Configento Cart en la pestaña Bloque de tema,
  4. compruebe las asignaciones en la pestaña Productos. Si ha conectado otra cuenta, los ID de componente anteriores ya no le pertenecen; vuelva a asignar.

Solución de problemas

  1. No aparece nada en la página de producto: el producto no tiene ningún componente asignado o falta el bloque del configurador en la plantilla de producto. Compruebe la pestaña Productos y, en la pestaña Bloque de tema, el estado de Bloque del configurador. Por la caché de Shopify, una asignación nueva tarda unos minutos.
  2. «Configurator could not be loaded.»: el configurador no pudo iniciarse (el mensaje está siempre en inglés). Causas: no hay suscripción activa, la tienda no está conectada con ninguna cuenta o configento.app no respondió en 8 segundos.
  3. «No se pudo cargar el componente (HTTP 401)»: la tienda funciona con un dominio propio que no está autorizado. Consulte Autorizar su propio dominio.
  4. «No se pudo cargar el componente (HTTP 404)» o con otro código: el componente asignado no está publicado o no pertenece a la cuenta conectada. Asigne un componente publicado en la pestaña Productos.
  5. El botón «Añadir al carrito» se queda gris un momento: es intencionado; está bloqueado hasta que el configurador está listo, como máximo 20 segundos.
  6. El carrito muestra la foto del producto, sin «Editar»: Configento Cart está desactivado en el tema publicado, por ejemplo tras un cambio de tema. Pestaña Bloque de tema → Activar Configento Cart → guardar.
  7. El checkout o el pedido muestran la foto del producto: compruebe también Configento Cart. La imagen llega aproximadamente medio minuto después de añadir el producto; quien va directamente a pagar puede ver todavía la foto del producto. Si la imagen falta de forma permanente, abra la aplicación y confirme los permisos solicitados.
  8. No hay recargo en el carrito: la transformación del carrito no está activa. Abra la aplicación en el administrador de Shopify; si no ayuda, póngase en contacto con el soporte de Configento. Además, no elimine ninguno de los dos productos «Configuración».
  9. El precio en la página de producto es distinto del esperado en la tienda: compruebe la pestaña Precios: visualización de impuestos y moneda de ambos lados; con la misma moneda, quite un tipo de cambio manual.
  10. La confirmación del pedido muestra la foto del producto: la plantilla de correo no está adaptada (paso 6).
  11. «invalid or expired code» al conectar: el código tiene más de 24 horas, ya se ha usado o está mal escrito. Genere uno nuevo en el admin.
  12. «shop already linked»: la tienda ya está conectada con una cuenta. Para otra cuenta: desinstale la aplicación y vuelva a instalarla.
  13. «Suscripción necesaria»: no hay ningún plan activo. Elegir un plan.
  14. «No se pudo autorizar esta sesión.»: vuelva a cargar la página. Si el mensaje persiste, desinstale la aplicación y vuelva a instalarla.

Próximos pasos

← Todos los artículos Prueba gratuita 14 días