Barra de objetivo del carrito

La Cart Goal Bar convierte una oferta gasta más, ahorra más en una línea y una barra: cuánto falta por gastar, qué desbloquea eso y una marca por cada nivel del camino. Se va llenando a medida que crece el carrito del comprador.

Configuración

1. Activa Show on storefront en el descuento gasta más, ahorra más.

   Abre el descuento gasta más, ahorra más y activa Show on storefront. Está activado en un descuento nuevo.

2. Haz clic en Add junto a Cart Goal Bar.

   En el panel Add to your theme de esa tarjeta, la fila Cart Goal Bar dice “Shows progress toward the next tier in the cart”. Su botón Add abre tu editor de temas con el bloque listo para colocar.

   

3. Coloca el bloque en el editor de temas y guarda.

   Pon el bloque donde los compradores deban ver su progreso y haz clic en Save.

4. Define los colores y los textos de la barra.

   Todo lo de abajo es una opción del editor de temas en el bloque.

Ajustes

Bar

• Track color — la parte sin llenar de la barra. Por defecto #e5e5e5.
• Fill color — la parte llena. Por defecto #1a1a1a.
• Unlocked color — se usa cuando se alcanza el nivel más alto. Por defecto #2e7d32.
• Text color — la línea encima de la barra.
• Bar height — 4–32 px. Por defecto 10.
• Roundness — 0–24 px. Por defecto 8.
• Show amounts under the bar — desactivado por defecto. Muestra lo gastado y el siguiente umbral.

Wording

• Goal text — por defecto Spend {amount} more to get {percent} off. {amount} y {percent} se sustituyen automáticamente.
• Unlocked text — por defecto You’ve unlocked {percent} off!
• Tier mark colour — por defecto #ffffff. Para las marcas aún no alcanzadas; una marca alcanzada usa el color de desbloqueo.
• Tier mark shape — Circle (por defecto) o Square.
• Tier mark size — 6–28 px. Por defecto 14.
• Show tier amounts under the bar — desactivado por defecto, porque las etiquetas se pueden solapar en pantallas estrechas.
• Tier reached text — por defecto You've got {current} off. Spend {amount} more to get {percent} off. Se muestra cuando se alcanza un nivel y queda otro; {current}, {amount} y {percent} se sustituyen automáticamente.
• Code hint prefix — por defecto “Use code”. Solo se muestra en los descuentos con código.
• Static text — por defecto Spend {amount} to get {percent} off. Se usa cuando no se puede medir el progreso.
• Static text with excluded items — por defecto Spend {amount} to get {percent} off eligible items. Se usa en lugar del texto estático cuando el descuento excluye algunos artículos.

Ejemplos

Una barra discreta con los colores de tu marca

Fill color: #1a1a1a
Unlocked color: #2e7d32
Bar height: 10
Roundness: 8
Show amounts under the bar: off

Una barra llamativa que nombra cada nivel

Bar height: 16
Tier mark shape: Square
Tier mark size: 18
Show tier amounts under the bar: on
Goal text: Only {amount} more for {percent} off

Cómo lo ve el comprador

Mientras la app puede medir el carrito, la línea va contando hacia atrás — “Spend $20 more to get 15% off” — y la barra se llena hacia la siguiente marca. Cuando se alcanza un nivel y queda otro, la línea cambia al Tier reached text; en el nivel más alto cambia al Unlocked text y la barra toma el color de desbloqueo. Se dibujan marcas para hasta 6 niveles.

Cuando no se puede medir el progreso, el bloque indica la oferta con el Static text en su lugar — nunca una promesa de progreso que no puede sostener. El descuento en sí no se ve afectado en ninguno de los dos casos: Shopify comprueba el carrito y lo aplica cuando el carrito cumple los requisitos.

En un descuento con código se muestra el Code hint prefix para que el comprador sepa que hace falta un código.

Límites y notas

• Las marcas de nivel se dibujan para hasta 6 niveles. Más allá, la barra se sigue llenando y los textos siguen contando hacia atrás; solo se quitan las marcas.
• Bar height 4–32 px · Roundness 0–24 px · Tier mark size 6–28 px.
• Las condiciones y las exclusiones pueden desactivar el progreso en vivo. Cuando las reglas de la oferta hacen que la app no pueda medir la parte del carrito que cumple los requisitos, el bloque recurre al texto estático. La tarjeta Show on storefront del descuento indica qué caso se aplica.
• Pausar la oferta oculta la barra, y la tarjeta lo indica en lugar de dejar un interruptor con aspecto de estar activo.
• No hace falta el app embed («incrustación de la app»). El bloque se renderiza por su cuenta.

Relacionado

• Gasta más, ahorra más — el descuento detrás de la barra.
• Widgets de la tienda online — los otros tres bloques de tema.
• App embed — necesario para los Sale Badges y los Price Drops, no para los bloques.