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

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.

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.

0:32

0:22

Mostrar los bloques en Shop Pay

Los clientes que ya usan Shop Pay pagan en el checkout propio de Shop Pay. Shopify solo muestra ahí un bloque de app si tú lo permites, bloque por bloque, y está desactivado por defecto: mientras no lo actives, la barra no aparece para estos clientes.

1. En el editor de checkout, haz clic en el bloque Progress bar.
2. En la sección de comportamiento del checkout, activa la opción para incluir el bloque en Shop Pay.
3. Haz lo mismo con el bloque Remove button y, si lo usas, con el bloque Recommendations.
4. Guarda.

Con la opción activada, aparece un enlace de vista previa de Shop Pay debajo. El ajuste solo cubre Shop Pay: Shopify no muestra ningún bloque de app en los demás pagos exprés, como Apple Pay, Google Pay o PayPal.

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 nivel, Mostrar mensaje final de éxito (con Alineación del mensaje de éxito), Mostrar nombres de los niveles, Mostrar precios, Mostrar lista de niveles alcanzados, Mostrar lista de niveles 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; si el cliente paga con Shop Pay, el bloque está incluido en Shop Pay; 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.