Cómo instalar Yaco Progress Bar en una tienda Shopify

Instala la app y sigue la guía de configuración

Instala Yaco Progress Bar desde la Shopify App Store y ábrela: la página Inicio muestra una Guía de configuración en tres pasos, más un cuarto opcional. Síguelos en orden.

Paso	Para qué sirve	Botón
1. Configura tus niveles y descuentos	Abrir la lista de niveles para revisarlos o editarlos: el paso se marca en cuanto la abres	Ir a la configuración
2. Activar en Shopify	Activar el app embed en tu tema	Activar la integración de la app o Ir a la integración con el tema
3. Integrar en el tema principal	Elegir dónde aparece la barra (carrito lateral, página de carrito, página de producto)	Colocar la barra de progreso
4. Tu plan (opcional)	Ver en qué punto está tu prueba gratuita, o elegir un plan de pago	Ver los planes

Tras una primera instalación, se envía un email de bienvenida a cada persona que ha abierto Yaco en tu tienda, en su idioma (a la dirección de email de tu tienda si nadie lo ha abierto todavía). Resume los niveles encontrados y los pasos que faltan.

Revisa los niveles creados para ti

Al instalarla, la app mira las ofertas que ya tienes en tu tienda: envío gratis y cada descuento automático activo con un mínimo que alcanzar (un importe o un número de artículos), «Compra X y llévate Y» incluido. Cada descuento se convierte en su propio nivel, para que la barra anuncie lo que tu checkout ya concede. Un descuento «Compra X y llévate Y» que regala un artículo de un solo producto a partir de un importe gastado («a partir de 100 € de compra, la bolsa gratis» o «20 € de descuento en la bolsa») se convierte en un nivel Producto gratis: la barra añade ese producto al carrito al alcanzar el importe, y tu descuento de Shopify sigue fijando su precio (Usar mi descuento de Shopify). Los demás descuentos «Compra X y llévate Y» (un número de artículos que comprar, varios productos o una colección a elegir) se convierten en un nivel que solo muestra el progreso. Un descuento limitado a algunos productos tiene su propia barra. Un descuento reservado a un segmento o a clientes concretos solo se importa si la app ya tiene acceso a tus clientes, algo que solo pide más adelante: al instalarla, normalmente se descarta. En ese caso, la página de inicio de la app lista esos descuentos: haz clic en Permitir el acceso a los clientes y añadir, confirma en Shopify y la app los añade como niveles que solo ven esos clientes. El equipo de soporte también puede importarlos más tarde. Los descuentos creados por otras apps no se importan: la app no puede leer sus condiciones. El primer paso de la guía lista los niveles bajo Hemos preconfigurado estos niveles desde tu tienda:. Haz clic en Ver los niveles para abrir la lista y revisarlos.

Si no encuentra ninguna oferta, la barra empieza con un nivel de ejemplo de envío gratis. Este ejemplo no cambia tus tarifas de envío de Shopify: sustitúyelo por tu oferta real, o lee barra de envío gratis para configurar una. Para crear otras recompensas, consulta añadir un nivel.

Los niveles importados siguen su descuento

Un nivel importado de un descuento automático sigue vinculado a él. Cuando modificas el descuento en Shopify (importe mínimo, valor, productos o colecciones, producto regalado, clientes que pueden usarlo, fechas), el nivel lo sigue en unos segundos, y la barra de tu tienda con él. Si cambiaste tú un ajuste del nivel en la app (su importe, su nombre o sus textos, sus fechas, su barra, su producto regalado), la app conserva tu cambio y ya no reescribe ese ajuste; los demás siguen el descuento. Desactivar el descuento en Shopify le pone una fecha de fin: el nivel deja de mostrarse en esa fecha.

En el nivel, un aviso indica Vinculado a tu descuento de Shopify «…», con un botón para abrir el descuento en Shopify. La opción de descuento del nivel se llama Usar mi descuento de Shopify (tu descuento otorga la ventaja y el nivel la muestra) o Dejar que Yaco gestione el descuento (la app crea su propio descuento, con los ajustes de la etiqueta Más funciones). Al pasar a Dejar que Yaco gestione el descuento, la app te pregunta qué hacer con tu descuento: deja marcada la casilla Desactivar «…» en Shopify al guardar para que tus clientes no reciban la ventaja dos veces. No se elimina nada y la app conserva las fechas del descuento. La casilla viene desmarcada cuando el nivel no llega a todos los clientes de tu descuento (mercados, fuente de tráfico, condiciones del carrito) y bloqueada cuando otro nivel sigue usando el descuento. Si mantienes tu descuento activo, el aviso Tu descuento «…» sigue activo permanece en el nivel hasta que lo desactives en Shopify. Un nivel gestionado por Yaco ya no sigue tu descuento. Volver a Usar mi descuento de Shopify elimina el descuento de la app al guardar y propone volver a activar el tuyo: con sus fechas de inicio y fin de antes si la app lo había desactivado, sin fecha de fin en caso contrario.

Si eliminas el descuento en Shopify, el nivel no se elimina: la app lo desactiva para que tu barra no prometa un descuento que el pago ya no aplica, y aparece una alerta en el nivel, con la etiqueta Descuento de Shopify eliminado en la lista de niveles. Desde el nivel, haz clic en Dejar que Yaco cree el descuento para reactivarlo con un descuento del mismo valor creado por la app (descuento porcentual o de importe fijo), o en Desvincular del descuento de Shopify para conservarlo tal cual y gestionarlo tú. Si el descuento pasa a estar reservado a clientes a los que el nivel no puede dirigirse, el nivel se desactiva igual. Un nivel que no sigue su descuento se importó antes de que existiera este vínculo, o se creó a mano: modifícalo en la app.

Activa el app embed

La barra se carga mediante un app embed. Se activa una vez por tema, en el editor de temas de Shopify.

1. En la guía, haz clic en Activar la integración de la app. El editor de temas se abre en los app embeds.
2. Activa Yaco Progress Bar.
3. Haz clic en Guardar arriba a la derecha del editor de temas.

También puedes hacerlo a mano: en el admin de Shopify, abre Tienda online › Temas › Personalizar, haz clic en el icono de Incrustaciones de aplicaciones en la barra lateral izquierda, activa Yaco Progress Bar y guarda.

Si tu tema publicado pierde el app embed después de activarlo, por ejemplo al publicar otro tema, la barra deja de mostrarse. La página Inicio vuelve a abrir la guía de configuración, aunque la hubieras cerrado, en el paso Activar en Shopify. En cada navegador, ocurre cada vez que se publica un tema sin el app embed: si la vuelves a cerrar, se queda cerrada hasta que publiques otro tema.

Elige cómo se carga la configuración (opcional)

En los ajustes del app embed, Origen de la configuración ofrece dos opciones:

• Tras cargar la página (recomendado), por defecto: las páginas cargan tan rápido como sin la app, y la barra obtiene su configuración de Yaco una vez cargada la página.
• En la página (página más pesada): la configuración se escribe en cada página. Si tus productos de regalo tienen cientos de variantes, puede añadir hasta 0,3 s a la carga de cada página.

Mantén Tras cargar la página en la mayoría de los casos. Elige En la página solo si vendes a compradores B2B y quieres que la lista de regalos muestre el precio de su catálogo: con Tras cargar la página, muestra el precio público. Si activaste el app embed antes de noviembre de 2026, el ajuste puede seguir en En la página: cámbialo en los ajustes del app embed.

Coloca la barra en tu tema

El app embed carga la barra, pero eres tú quien elige dónde se muestra. Haz clic en Colocar la barra de progreso: el editor de temas se abre con el menú de Yaco, y haces clic en el punto de la página donde debe aparecer la barra, por ejemplo en el carrito lateral (cart drawer). El método completo y las alternativas (bloque de app en la página de producto o de carrito, una línea de código para desarrolladores) están en ubicación en el tema.

Si otras tiendas ya colocaron la barra en la misma versión de tu tema, la app la coloca por ti al instalarse. El paso se llama entonces Verificar la integración en el tema principal: haz clic en Verificar en el editor de temas para ver dónde aparece la barra y moverla si hace falta. El paso se marca una vez abierto el editor desde la guía.

Si tu tema es difícil de integrar, la página Integración con el tema tiene un botón Contáctanos para pedir al equipo de Yaco una integración personalizada gratuita.

Revisa el estado de las integraciones

Debajo de la guía de configuración (justo debajo del mensaje de bienvenida cuando la guía está cerrada), la tarjeta Estado de las integraciones se queda en la página Inicio. La tarjeta tiene una fila por superficie, Tienda online (tu tema publicado) y luego Checkout, y una columna por función, Barra de progreso y Recomendaciones. Bajo Tienda online, la insignia Integración de aplicación indica si la integración de aplicación (app embed) está activada:

• Tienda online: en la línea Bloque de aplicación, los bloques que colocas tú en el editor de temas, con el número de lugares donde está cada uno, por ejemplo 2 activos. En la línea Yaco ubicaciones, las integraciones que la app añade a tu tema, gestionadas desde la pestaña Ubicaciones de Integración con el tema, además de las líneas de código pegadas en tu tema con el método Soy desarrollador, por ejemplo 2 integraciones. El recuento incluye cada copia de ese código encontrada en tu tema publicado, una por aparición. Haz clic en una insignia para ver la lista: las ubicaciones (incluido el carrito lateral automático) abren la pestaña Ubicaciones, los archivos del tema abren el editor de código del tema en ese archivo. El código del tema se vuelve a comprobar cada 10 minutos: para ver un cambio enseguida después de pegar o quitar el código, haz clic en Actualizar al final de la lista.
• Checkout: una sola línea, los bloques que colocas en el editor de checkout, por ejemplo 1 activo. Esta línea solo aparece en las tiendas Shopify Plus: Shopify reserva la personalización del checkout a Plus. Si tu plan de Yaco no incluye el checkout (plan gratuito o Starter), aparece en su lugar una insignia Premium: los bloques colocados en el editor de checkout no se muestran a tus clientes hasta que cambies a Premium u Optimize.

Una insignia verde indica que está hecho. Integración de aplicación desactivada aparece en amarillo y sin colocar bajo Barra de progreso en la línea Yaco ubicaciones en naranja: falta un paso. Una insignia gris (sin colocar) no es un error: la barra puede mostrarse gracias al app embed y a las Yaco ubicaciones, sin ningún bloque de app, y las recomendaciones son opcionales. Haz clic en la insignia Integración de aplicación para abrir el editor de temas en la integración de aplicación. Haz clic en otra insignia para abrir la página que la gestiona: la pestaña Métodos alternativos de Integración con el tema para la línea Bloque de aplicación, la lista de integraciones para la línea Yaco ubicaciones, Checkout para la barra en el checkout, Recomendaciones para las recomendaciones en el checkout.

Tu plan (opcional)

El plan gratuito se activa solo al instalar la app: la barra se muestra en tu tienda en cuanto el app embed está activado y la barra está colocada. No hace falta pagar para completar este paso: se marca en cuanto abres Ver los planes, la página que explica tu prueba y lo que cambia después. La guía muestra entonces 4 de 4 tareas completadas. Abrir la lista de niveles o Ver los planes marca estos pasos para todo tu equipo, en todos los navegadores. En una tienda de desarrollo o una tienda protegida con contraseña, el paso indica que tu barra se muestra sin suscripción: tu prueba empieza cuando tu tienda se abre al público.

El paso indica en qué punto está tu prueba de 14 días con todos tus niveles. La prueba es un regalo además del plan gratuito: empieza la primera vez que tu barra se muestra en tu tienda, siempre que tengas al menos dos niveles activos (con un solo nivel, el paso te propone añadir un segundo), y luego el paso cuenta los días que quedan. Tras la prueba, el plan gratuito mantiene 1 nivel activo. Haz clic en Ver los planes para compararlos. Consulta suscripción.

Si el paso muestra Necesario para mostrar tu barra, tu tienda aún no tiene plan, algo que puede pasar en una instalación antigua: haz clic en Ver los planes y luego en Activar en la tarjeta Gratis.

Una vez colocada la barra, abre tu tienda en una ventana privada, añade un producto al carrito y comprueba que la barra aparece y avanza. Si no, consulta la barra no aparece.