Instalar el plugin de Shopify

El plugin de Shopify conecta tu configurador de configento.app directamente con las páginas de producto de tu tienda Shopify. Los compradores configuran su producto, ven el precio y la imagen del producto actualizarse en tiempo real y finalizan la compra con el checkout nativo de Shopify — sin salir de tu tienda. La configuración aparece en el carrito, en el checkout, en el pedido y en la confirmación de pedido.

Requisitos

• Tienda Shopify con un tema Online Store 2.0 (p. ej. Horizon, Dawn, Sense, Refresh, Origin o temas premium actuales). Los temas legacy sin plantillas JSON no son compatibles.
• No se requiere Shopify Plus — el plugin funciona en todos los planes de Shopify.
• Una cuenta de configento.app no es un requisito previo: puedes crearla durante la configuración o conectar una existente.

Instalación

1. Buscar «Configento Configurator» en el Shopify App Store.
2. Hacer clic en Agregar aplicación.
3. Confirmar la pantalla de permisos.
4. Shopify abre a continuación la aplicación dentro del admin de Shopify (Admin Integrado).

Vista general: el Admin Integrado

Puedes abrir la aplicación en cualquier momento en el admin de Shopify, en Aplicaciones › configento.app. Tiene cuatro pestañas:

Las pestañas Productos, Precios y Bloque de tema están disponibles una vez conectada la cuenta.

Paso 1 — Elegir un plan

Sin una suscripción activa, la pestaña Configuración muestra «Suscripción necesaria». Haz clic en «Elegir un plan» y confírmalo en Shopify. Los primeros 14 días son gratis. La facturación se realiza a través de tu factura de Shopify.

El plan incluye una cuota mensual para las funciones de IA, sin costes adicionales.

Paso 2 — Conectar tu cuenta de configento.app

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

Aún sin cuenta: Haz clic en «No, crear una cuenta ahora». configento.app crea tu cuenta y te envía una invitación por correo electrónico para establecer tu contraseña. Tarda un momento; después recarga la página.

Cuenta existente: Haz clic en «Sí, ya tengo una cuenta» y genera un código de conexión de 6 dígitos:

1. Abrir el portal de servicio de Configento (service.configento.app) e iniciar sesión.
2. Hacer clic en «Gestionar» junto al servicio que quieres conectar con la tienda.
3. En el admin, abrir Ajustes › Integraciones.
4. Desplazarse hasta la tarjeta Shopify. Si tienes varias cuentas de Configento, elegir la que debe ser propietaria de esta tienda y hacer clic en «Generar código de conexión».
5. Copiar el código, pegarlo en la aplicación y hacer clic en «Conectar».

El código es válido durante 24 horas. Una vez conectada, la pestaña muestra Configuración ✓ y la cuenta conectada.

Nota: una tienda Shopify se conecta exactamente con una cuenta de configento.app. Para vincular la tienda más adelante a otra cuenta, desinstala y vuelve a instalar la aplicación.

Paso 3 — Componentes de ejemplo (opcional)

Si tu cuenta aún está vacía, la aplicación ofrece añadir cuatro componentes de ejemplo. Muestran una imagen de producto combinada, características combinadas con fórmulas, un conjunto de reglas e iconos gráficos. Puedes editarlos, publicarlos o eliminarlos como cualquier otro componente. Los ejemplos se publican automáticamente; tarda un momento.

Tus propios componentes los creas en el admin de configento.app (admin.configento.app). Solo los componentes publicados pueden asignarse a un producto.

Paso 4 — Asignar productos

En la pestaña Productos:

1. En «Añadir un producto», buscar el producto por su nombre.
2. Elegir el componente y añadirlo con +.
3. El producto aparece arriba en «Productos con configurador». Allí puedes cambiar el componente o quitar la asignación con −.

Los cambios se guardan de inmediato. Shopify almacena las páginas de la tienda en caché durante unos minutos, por lo que una nueva asignación puede tardar un momento en aparecer en la página del producto.

Alternativa: La asignación es un metafield de producto y también puede definirse directamente en el producto en el admin de Shopify: espacio de nombres configento, clave component_id, tipo single_line_text_field, valor = ID del componente (p. ej. 10244).

Paso 5 — Configurar el tema

En la pestaña Bloque de tema activas dos cosas — una vez por tema. La pestaña indica para ambas si están activas en tu tema publicado y te avisa si falta algo.

Bloque del configurador

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

Ajustes del bloque en el editor de temas:

Extensión del carrito «Configento Cart»

La extensión del carrito es una integració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».

En Shopify, las integraciones de aplicaciones están desactivadas hasta que las activas — una aplicación no puede hacerlo por ti. Así se activa:

1. Hacer clic en «Activar Configento Cart». Shopify abre el editor de temas con la integración ya activada.
2. Guardar.

Importante: el interruptor se aplica por tema. Tras cambiar de tema o reinstalar la aplicación, actívalo de nuevo en el tema nuevo.

Sin la extensión del carrito la compra funciona por completo — precio, configuración y checkout son correctos. Solo que el carrito de tu tema muestra la foto normal del producto y ningún enlace Editar.

Paso 6 — Confirmación de pedido (opcional)

El correo de confirmación de pedido incluye la configuración automáticamente (ver más abajo). Sin embargo, la imagen del producto en el correo proviene de la plantilla de correo de tu tienda, y las aplicaciones no pueden modificarla. Para mostrar la imagen de la configuración en lugar de la foto del producto, ajusta la plantilla una sola vez. La pestaña Bloque de tema te guía y ofrece los fragmentos para copiar:

1. «Editar confirmación de pedido» abre el código de la plantilla (en el admin de Shopify: Configuración › Notificaciones › Notificaciones al cliente › Confirmación de pedido › Editar código).
2. Buscar en el código (Ctrl+F / Cmd+F) esta línea: {% if parent_line_item and parent_line_item.image %}
3. Sustituir cada aparición de esa línea por el siguiente bloque (también disponible para copiar en la pestaña Bloque de tema). La plantilla estándar contiene la línea varias veces — una por 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 %}

4. Guardar la plantilla.

Si no encuentras la línea, tu plantilla ha sido personalizada. En ese caso, tu desarrollador o el soporte de Configento coloca el bloque donde se muestra la imagen de un paquete.

Precios, moneda e impuestos

Normalmente no necesitas tocar la pestaña Precios — la aplicación lee la moneda y la visualización de impuestos de tu tienda en directo desde Shopify y convierte automáticamente:

• Impuestos: Si tu tienda muestra los precios sin impuestos (p. ej. «Impuestos calculados al pagar»), la aplicación convierte los precios brutos de configento.app en precios netos; Shopify añade los impuestos al pagar. Si tu tienda muestra los precios con impuestos, la aplicación usa el tipo que Shopify calcula para el producto.
• Moneda: Si configento.app y tu tienda usan la misma moneda, no se convierte nada. Con monedas distintas, la aplicación usa el tipo de cambio de Shopify Markets.
• Tipo manual: Solo es necesario si Shopify no proporciona ningún tipo. Un tipo fijado se ignora cuando ambos lados usan la misma moneda — la pestaña lo indica; «Quitar el valor manual» lo elimina.

Así el precio es idéntico en la página del producto, en el carrito y al pagar.

Lo que ve el comprador

1. Página del producto: El configurador se carga automáticamente. El precio y — si el componente tiene capas de imagen — la imagen de producto combinada en la galería se actualizan con cada elección.
2. Agregar al carrito: La configuración se guarda y su imagen se prepara para el carrito, el checkout y el pedido. Tarda unos segundos.
3. Carrito: La línea muestra la imagen de la configuración, las elecciones y un enlace «Editar» de vuelta a la página del producto (con la extensión del carrito, ver el paso 5).
4. Checkout: Una línea titulada «Producto – elección, elección, …» con la imagen de la configuración. Desplegada, muestra sus partes: el producto a su precio base y «Configuración» con el recargo. Todos los métodos de pago, códigos de descuento y funciones de Shopify siguen disponibles.
5. Confirmación de pedido: Una línea con la configuración en el título, el precio total y las partes — con la imagen de la configuración si realizaste el paso 6.

El pedido en el admin de Shopify

Shopify muestra un pedido configurado con sus partes: el producto a su precio base y la línea «Configuración» con el recargo. La selección completa del comprador figura como propiedades en la línea «Configuración» (p. ej. «Modelo: Linea • Vidrio: Vidrio transparente»); ambas líneas remiten mediante «Parte de» al título con la configuración.

Lo que la aplicación crea en tu tienda

• Dos productos en borrador «Configuración» (el nombre depende del idioma de la tienda): llevan el recargo de la configuración en el carrito — uno para productos con envío y otro para productos sin envío, para que un producto configurado siga siendo una sola línea en el pedido y en el correo. No son visibles en la tienda. No los elimines, publiques ni renombres — si faltan, la aplicación los vuelve a crear automáticamente.
• Imágenes de las configuraciones (configento-….png) en los archivos de tu tienda. Shopify solo muestra en el carrito y el checkout imágenes de su propio CDN; por eso la aplicación guarda allí cada imagen de configuración.
• Metafields: configento.component_id en los productos (asignación) y metafields de tienda para los productos de recargo.

Permisos: La aplicación lee y escribe productos (asignación, productos de recargo), pedidos en borrador (cálculo del tipo impositivo), transformaciones del carrito (recargo) y archivos (imágenes de configuración), y lee los idiomas de tu tienda. Si una actualización añade un permiso, lo confirmas la próxima vez que abras la aplicación.

Soporte multilingüe

El plugin es compatible con alemán, inglés, español y francés. El configurador de la tienda sigue automáticamente el idioma de la tienda Shopify (Shopify Markets / selector de idioma); los demás idiomas usan el inglés. El Admin Integrado sigue el idioma de tu admin de Shopify.

Resolución de problemas

El configurador no se muestra:

Carrito y checkout:

Confirmación de pedido:

La conexión falla:

Próximos pasos

• Instalar el plugin de Shopware
• Instalar el plugin de Magento
• Crear tu primer componente
• Configurar precios