Dejar que el cliente elija su regalo en una ventana emergente o con un botón

Cuándo aparece el selector de regalo

El selector de regalo es una ventana emergente (modal) que lista los regalos que el cliente ha desbloqueado. Se usa cuando un nivel de regalo ofrece más de un producto o variante. Cómo aparece se ajusta en la tarjeta del nivel, sección Añadir el regalo al carrito automáticamente (consulta regalo), salvo si el diseño de la barra lo sustituye (ver más abajo):

Opción	Lo que ve el cliente
Mostrar automáticamente la ventana de regalo	La ventana se abre sola al alcanzar el nivel. Un regalo con una sola variante se añade directamente al carrito.
Mostrar el botón «Elegir un regalo»	Un botón bajo la barra abre la ventana. Solo para niveles con varios regalos. Si luego se desactivan los demás productos de regalo, el botón se mantiene y ofrece el regalo restante; si el cliente lo quita del carrito, el botón vuelve a aparecer.
Mostrar la lista de regalos en la barra de progreso	Sin ventana: los regalos aparecen en la barra y se añaden con un clic.
Desactivar la ventana y el botón	Yaco Progress Bar no añade nada. Úsalo cuando otra app añade el regalo.

Cuando se alcanzan dos o más niveles de regalo a la vez, se abre una sola ventana, con una sección por nivel y un único botón de confirmación.

Mostrar un nivel de otra forma en cada barra

Un diseño puede sustituir el modo del nivel en las barras que lo usan. Abre Diseño › Interfaz de regalo, tarjeta Visualización de los regalos:

Opción	Lo que muestran las barras que usan este diseño
Seguir el ajuste de cada nivel (por defecto)	El modo definido en la tarjeta de cada nivel.
Lista de regalos en la barra	Al alcanzar el nivel, sus regalos aparecen en una lista bajo la barra. Esta barra no muestra el botón Elegir un regalo.
Botón «Elegir un regalo»	Al alcanzar el nivel, el botón Elegir un regalo aparece en la barra. Un clic abre la ventana, con los colores y textos del diseño de esa barra.

Ejemplo: el carrito lateral usa el diseño A, con Lista de regalos en la barra, y la barra de la página del carrito usa el diseño B, con Botón «Elegir un regalo». El mismo nivel muestra sus regalos en lista en el carrito lateral y con un botón en la página del carrito. Sigue siendo un solo nivel, un solo descuento y un solo regalo: elegirlo desde cualquiera de las dos barras añade el mismo regalo.

En la tarjeta del nivel, bajo el modo, la app lista los diseños que lo sustituyen y el modo que impone cada uno.

Ventana que se abre sola. Para un nivel con Mostrar automáticamente la ventana de regalo, la ventana deja de abrirse sola cuando todas las barras de la página que muestran ese nivel usan un diseño con la lista o con el botón. Si queda al menos una barra que sigue el ajuste del nivel, se abre como antes. Cuando todavía no se muestra ninguna barra (por ejemplo, un carrito lateral que se carga después de añadir el producto), deciden las barras colocadas en tu tema.

Límites:

• Solo afecta a los niveles con varios regalos. Un nivel con un solo regalo siempre lo añade automáticamente; si el cliente lo quita, la barra muestra un botón Volver a añadir mi regalo (ver más abajo).
• Cuando un nivel así se alcanza a la vez que un nivel con un solo regalo, el regalo único se añade solo y la ventana no se abre: el cliente elige el otro regalo en la lista o con el botón de la barra. Lo mismo vale para un nivel con la lista o el botón en su propia tarjeta.
• El modo de compatibilidad (Desactivar la ventana y el botón) nunca se sustituye: lo sigue fijando el nivel.
• La opción de pago (Ofrecer los productos antes de alcanzar el nivel, como opción de pago) sigue reservada a los niveles con la lista en su propia tarjeta, y esos niveles conservan su lista en todas las barras: un diseño con el botón no la sustituye. Un nivel con el botón que un diseño muestra en lista no ofrece la opción de pago.

Qué pasa cuando el cliente la cierra

El botón de rechazo («No thanks» por defecto), la tecla Escape o un clic fuera de la ventana la cierran durante la sesión de navegación actual. No vuelve a abrirse sola hasta que se alcanza un nivel nuevo. El botón Elegir un regalo, si se muestra, sigue disponible para reabrirla.

Cerrar no es rechazar; quitar el regalo del carrito, sí. Para que la elección sea obligatoria, marca Ocultar el botón «No, gracias».

Cuando el cliente quita un regalo único

Un nivel con un solo regalo, añadido automáticamente, no tiene ventana. Cuando el cliente quita ese regalo del carrito, la app no lo vuelve a añadir por sí sola, y aparece un botón Volver a añadir mi regalo bajo la barra de progreso, en cada barra que muestra este nivel. Un clic vuelve a poner el regalo en el carrito, sin abrir ninguna ventana.

El botón desaparece en cuanto el regalo vuelve al carrito. No se muestra cuando el carrito vuelve a estar por debajo del umbral, cuando el regalo está agotado ni cuando un código de descuento no combinable con el regalo lo retira. Si un nivel con varios regalos también tiene un regalo por elegir en la misma barra, el botón propone primero Volver a añadir mi regalo; cuando el regalo vuelve al carrito, pasa a ser de nuevo Elegir un regalo para esa elección.

El botón usa el estilo del Botón «Elegir un regalo» del diseño de la barra, y su etiqueta se define por diseño (ver más abajo). Para que el cliente no pueda quitar el regalo en absoluto, marca Forzar a mantener el regalo en el carrito en la tarjeta del nivel.

Dónde cambiar su aspecto y sus textos

Los ajustes están repartidos en tres sitios.

1. Diseño › Interfaz de regalo (en la app):

• Botón «Elegir un regalo»: Mostrar el botón de regalo, Permitir cambiar el regalo tras la selección (el botón sigue visible y reabre la ventana), clases CSS para reutilizar el estilo de botón de tu tema, tamaño de fuente, colores, borde y padding.
• Modal de regalo: Tamaño de fuente del título (escritorio), Tamaño de fuente del título (móvil), Título en negrita, Agrupar variantes por producto (una tarjeta por producto con un menú de variantes, en lugar de una tarjeta por variante) y Ocultar el botón «No, gracias».
• Colores del modal de regalo, definidos por diseño: fondo de la ventana, fondo y borde de las tarjetas de regalo (normales y elegida), texto, fondo y relleno vertical del botón «Añadir al carrito», y Mostrar el subtítulo. Un color vacío retoma el de la incrustación de aplicación de tu tema y, después, el color por defecto. Con varios diseños, el título de la tarjeta indica el diseño que editas: cambia el que usa realmente tu barra.
• Los textos por defecto de la ventana, definidos por diseño en la tarjeta Textos por defecto del modal de regalo: el título, el subtítulo, los títulos de lista, las etiquetas «Gratis» y «Agotado», el mensaje «regalo ya no disponible», los botones «Elige tu regalo», «Añadir al carrito» y «No, gracias», la etiqueta del botón «Elegir un regalo», y el Botón «Volver a añadir el regalo» («Volver a añadir mi regalo» si se deja vacío, traducido a cada idioma de tu tienda). La pestaña Interfaz de regalo también aparece cuando un nivel ofrece un solo regalo añadido automáticamente, sin Forzar a mantener el regalo en el carrito.
• El estilo de la lista de regalos que aparece en la barra, y CSS personalizado para la ventana y para la lista.

2. La tarjeta del nivel: Texto del botón de regalo fija el texto del botón para ese nivel, y la tarjeta Textos del modal de regalo sustituye el título, el subtítulo y los títulos de lista para ese nivel. Usa {price} en el subtítulo para el umbral del nivel y {quantity} en el título de la lista para el número de regalos a elegir. Un texto definido en el nivel pasa por delante del texto del diseño, cuando la ventana solo muestra ese nivel. Cuando agrupa varios, se usan los textos del diseño. Un campo vacío también recupera el texto del diseño. Desmarcar Mostrar el subtítulo oculta el subtítulo solo para ese nivel; un nivel no puede volver a mostrar un subtítulo que su diseño oculta.

3. El editor de temas: en el admin de Shopify, abre Tienda online › Personalizar y luego Incrustaciones de aplicaciones › Yaco Progress Bar. Su sección Gift modal (etiquetas en inglés) se está retirando: sus colores, su ajuste de subtítulo y sus textos solo se usan cuando el diseño no tiene los suyos, y desaparecerán más adelante. Si los habías cambiado, se copiaron en tus diseños, donde ahora los editas.

Previsualizar la ventana en la app

La tarjeta Colores del modal de regalo, en Diseño › Interfaz de regalo y en la pestaña Interfaz de regalo de Niveles y descuentos, tiene un botón Vista previa del modal. Abre la ventana en la app, con el diseño que estás editando y todos los niveles que ofrecen varios regalos a elegir, alcanzados o no. En la vista previa de la barra, el botón Elegir un regalo también la abre, con los niveles alcanzados por el carrito simulado.

No se añade nada a ningún carrito: elige regalos y cierra la ventana como lo haría un cliente, no se guarda nada. Dos diferencias con tu tienda:

• un color vacío se muestra con el color por defecto, no con el del app embed de tu tema;
• la ventana usa el diseño que estás editando, sea cual sea la ubicación que tu tema da a cada nivel.

Si la app indica que ningún nivel ofrece varios regalos a elegir, añade varios productos o variantes a un nivel de regalo.

Regalos agotados

La ventana vuelve a comprobar el stock cada vez que se ofrecen regalos, como máximo una vez por minuto:

• un regalo que se agota aparece como Sold out y ya no se puede elegir;
• un regalo ya seleccionado que se agota se quita de la selección, con el mensaje "Gift no longer available" message;
• el número de regalos ofrecidos sigue el stock real: un nivel que promete 2 regalos solo ofrece 1 si queda una sola unidad, y el título se ajusta.

No se aplica ningún límite cuando una variante no sigue su inventario o se puede vender sin stock. Para consultar el stock, la app pide a Shopify permiso para leer el inventario de productos, y solo lee las cantidades de tus productos de regalo.

Traducir el selector de regalo

Los textos de un nivel y los textos de regalo del diseño se traducen desde sus propios campos, con el icono de traducción al final de cada campo (consulta traducciones). Las traducciones hechas antes en la app de Shopify Translate & Adapt se copiaron en tus diseños. Elige un idioma en el selector Idioma de la vista previa para comprobarlas.

Si un regalo nunca llega al carrito, consulta regalo no añadido.