# Mostrar la barra de progreso y los regalos en el checkout de Shopify

> En Shopify Plus, añade el bloque Progress bar en el editor de checkout para mostrar tus niveles y dejar que el cliente elija o quite sus regalos al pagar.

Actualizado el 2026-09-25 · https://www.yaco.studio/es/docs/checkout

## Lo que necesitas antes

- **Shopify Plus.** Shopify solo permite personalizar el checkout en las tiendas Shopify Plus. En los demás planes de Shopify, la barra aparece en la tienda y en el carrito, no en el checkout.
- **Una suscripción Yaco que incluya la extensión de checkout.** Si no la incluye, un aviso en la página **Checkout** te lo indica; consulta los [precios](https://www.yaco.studio/es/precios).

## Añadir la barra al checkout

Yaco Progress Bar ofrece dos bloques en el editor de checkout de Shopify. Añádelos por separado: poner uno no pone el otro.

1. En Yaco Progress Bar, abre **Checkout** y haz clic en **Añadir al Checkout** en la tarjeta **Integración**. Se abre el editor de checkout.
2. Añade el bloque **Progress bar**, idealmente en el **Resumen del pedido**.
3. Añade el bloque **Remove button** bajo **Carrito › Artículos en el carrito**. Añade un enlace «Quitar» bajo las líneas de regalo.
4. Guarda en el editor de checkout.

Los nombres de los bloques siguen en inglés en todos los idiomas. Después, la tarjeta **Integración** muestra **Extensión activa** en cuanto la barra se ha mostrado en un checkout real (**Extensión aún no detectada** hasta entonces), y **Botón Quitar activo** para el segundo bloque.

En el editor de checkout, el bloque **Progress bar** tiene sus propios ajustes: los pasos en los que aparece (**Add to Checkout**, **Add to Information**, **Add to Shipping**, **Add to Payment**, **Add to Review**; los dos primeros están activados por defecto) y dos filtros opcionales, **Show only these goals (comma-separated IDs)** y **Hide these goals (comma-separated IDs)**. El ID de un nivel se copia desde la lista de niveles de la app.

## Elegir qué muestra la barra

En la página **Checkout** de la app:

- **Disposición multibarra**, para tiendas con varias barras: **Apiladas**, **Una por una** o **Lado a lado**.
- **Visibilidad de los elementos**: **Mostrar borde**, **Mostrar mensaje de finalización del objetivo**, **Mostrar mensaje final de éxito** (con **Alineación del mensaje de éxito**), **Mostrar nombres de los objetivos**, **Mostrar precios**, **Mostrar lista de objetivos alcanzados**, **Mostrar lista de objetivos no alcanzados**.
- **Tono de la barra de progreso**: **Auto** o **Crítico**.
- **Orden de los elementos**: arrastra para reordenar mensaje de éxito, nombre del nivel, precio, barra y lista de niveles.

Haz clic en **Publicar** para aplicar los cambios.

## Dejar que el cliente elija su regalo en el checkout

La sección **Selección de regalos** define cómo aparecen los regalos desbloqueados. Se aplica a todos los niveles de regalo, salvo aquellos en los que la app no añade el regalo por sí misma.

- **Visualización de la lista**: **Mostrar la lista de regalos** (por defecto) los muestra justo debajo de la barra; **Mostrar un botón** los pliega tras un botón, como el botón «Elegir un regalo» de tu tienda. Su **Texto del botón** viene rellenado en el idioma principal de la tienda y se puede traducir.
- **Visualización de cada regalo**: **Casilla de verificación** (miniatura, nombre y casilla) o **Botones Añadir y Quitar** (una tarjeta más grande con un botón Añadir que pasa a Quitar). Con esta segunda presentación, un regalo ya elegido desaparece de la lista y se devuelve desde el enlace «Quitar» de su línea.
- **Mostrar un botón « Quitar » en el resumen del pedido** (activado por defecto): añade un enlace «Quitar» bajo cada línea añadida por Yaco, regalos y opciones de pago. Nunca aparece en las líneas de otra app ni en los niveles con **Forzar a mantener el regalo en el carrito**. Necesita el bloque **Remove button**.

El precio de un regalo aparece tachado con «GRATIS». Estos textos siguen el idioma del checkout del cliente y no se pueden modificar. Un regalo elegido en la tienda llega ya seleccionado.

## Mensajes que puede ver el cliente

- **«Los regalos ya no se pueden cambiar aquí. Vuelve al carrito para cambiar tu elección.»** Shopify limita el número de cambios de carrito que una app puede hacer en un mismo checkout y rechaza los siguientes. El cliente puede volver al carrito o recargar el checkout.
- **«Este regalo no se puede entregar en tu dirección.»** Shopify ha rechazado la línea de regalo: con ella, el carrito ya no tiene ninguna opción de envío para esa dirección. Comprueba en Shopify, **Configuración › Envío y entrega**, que el perfil de envío del producto de regalo cubre las zonas donde se ofrece el nivel.

## La barra no aparece en el checkout

Comprueba en este orden: la tienda está en Shopify Plus; el bloque **Progress bar** está colocado y guardado; el paso actual está marcado en los ajustes del bloque; la tarjeta **Integración** indica **Extensión activa**; el carrito cumple las condiciones de al menos un nivel. Si los regalos desaparecen en el checkout, consulta [regalo retirado](https://www.yaco.studio/es/docs/regalo-retirado).