Dónde colocar la barra de progreso en un tema Shopify: carrito lateral, carrito, producto

Coloca la barra en el carrito lateral o en otro sitio

El método recomendado es Colocar barra de progreso: señalas el punto de tu tema y la app lo recuerda. Sirve para el carrito lateral (cart drawer), la página de carrito, la página de producto o cualquier otra parte del tema.

1. En la app, abre Integración con el tema, pestaña Ubicaciones.
2. En Temas, comprueba el tema en el que trabajas (Elige un tema). El tema publicado lleva la etiqueta (tema actual). Las ubicaciones se guardan por tema.
3. En la sección Activación del app embed, haz clic en Activar si el app embed aún no está activo, activa Yaco Progress Bar en el editor de temas y guarda.
4. En Cart drawer y ubicaciones generales, haz clic en Colocar barra de progreso (o Gestionar ubicaciones cuando ya existe una ubicación).
5. El editor de temas se abre con el menú Integrar la barra de progreso Yaco. Haz clic en Añadir barra de progreso y luego en el elemento de la página donde debe aparecer la barra.
6. Ajusta el formulario si hace falta y haz clic en Guardar.

Mientras señalas la página, la app enmarca el elemento bajo el cursor y traza una línea donde se insertará la barra. Puedes dejar activo el inspector de temas de Shopify: sus contornos se ocultan durante la colocación.

Para colocar la barra en el carrito lateral, añade primero un producto al carrito y abre el carrito lateral, y luego haz clic en Añadir barra de progreso: una vez iniciada la colocación, un clic en la página elige una ubicación y ya no abre nada.

Ajustes de una ubicación

Cada ubicación tiene sus propios ajustes, en el editor de temas o desde la lista Ubicaciones de este tema de la misma página:

• Elemento de referencia y Posición respecto al elemento de referencia: dónde va la barra (antes, después, primer hijo, último hijo o en lugar del elemento).
• Condición de visibilidad: siempre visible, solo cuando el carrito contiene artículos o solo cuando está vacío.
• Mostrar en los templates: limitar la ubicación a algunas plantillas de página. Todas por defecto.
• Filtro de niveles: mostrar todos los niveles, solo algunos, u ocultar algunos en esta ubicación.
• Diseño: el diseño que usa esta ubicación.
• Nombres de clases CSS y CSS del contenedor: afinar los márgenes alrededor de la barra.

Una ubicación se apaga sin borrarla con Desactivar integración.

Ocultar la barra cuando el carrito está vacío

Elige, en la Condición de visibilidad, la opción que solo muestra la barra cuando el carrito contiene artículos: la barra queda oculta mientras el carrito está vacío y aparece en cuanto se añade un producto.

• Barra colocada con Colocar barra de progreso: abre la ubicación desde Ubicaciones de este tema y elige When the cart contains items en su Condición de visibilidad (en el editor de temas, Cuando el carrito contiene artículos).
• Barra añadida con el bloque de app Yaco progress bar: en el editor de temas, selecciona el bloque, elige Cuando el carrito contiene artículos en su Condición de visibilidad y haz clic en Guardar.

La condición cuenta los artículos del carrito, no el progreso hacia un nivel: un nivel con umbral 0 también queda oculto hasta que se añade un producto. La opción When the cart is empty (Cuando el carrito está vacío en el bloque) hace lo contrario, para un mensaje solo para carritos vacíos.

Reutiliza ubicaciones de otro tema o de otra tienda

• Importar, en la tarjeta Ubicaciones de este tema, copia las ubicaciones de otro tema de esta tienda, o de otra tienda donde uses Yaco con la misma cuenta de Shopify. Una tienda aparece en cuanto hayas abierto Yaco en ella con esa cuenta. Una ubicación que ya se usa en el tema nunca se añade dos veces.
• Cuando otras tiendas con Yaco usan el mismo tema en la misma versión, un aviso ubicaciones listas para tu tema te propone sus ubicaciones. Son anónimas y llevan la etiqueta Misma versión o Versión cercana. Marca las que quieras y revisa el resultado.
• Cuando duplicas un tema en Shopify, sus ubicaciones se copian automáticamente al tema nuevo.

Métodos alternativos

La pestaña Métodos alternativos reúne otras formas de añadir la barra:

• Página de producto y página de carrito: los bloques de app del editor de temas. Para Yaco progress bar y Yaco recomendaciones, haz clic en Añadir a la página de producto o Añadir a la página del carrito: el editor de temas se abre con el bloque ya añadido a la página, solo tienes que hacer clic en Guardar. Cada bloque muestra su estado en tu tema publicado, por ejemplo Bloque de aplicación · 1 activo. En los ajustes del bloque Yaco recomendaciones, el ID de recomendación elige qué recomendaciones mostrar (vacío = predeterminadas). En los ajustes del bloque Yaco progress bar, marca por su nombre los niveles que se muestran en Niveles y elige el diseño por su nombre en Diseño (vacío = diseño predeterminado). El Filtro de niveles decide si los niveles marcados son los únicos que se muestran o los que se ocultan; con Mostrar todos los niveles, las marcas se ignoran. La Condición de visibilidad oculta el bloque según el carrito, en todas las páginas donde está colocado; en el editor de temas, un bloque oculto aparece como un marco punteado para que puedas seleccionarlo. El marco indica por qué la barra está oculta: barra desactivada en la app, ningún nivel creado, ningún nivel aplicable a la vista previa, ninguno de los niveles marcados aplicable (Filtro de niveles) o la condición de visibilidad. CSS del contenedor, en Colores y CSS, añade tus propias declaraciones CSS al contenedor del bloque, como el CSS del contenedor de una ubicación; se aplican incluso cuando eliges un diseño.
• Soy desarrollador: copia la línea de código con Copiar al portapapeles y pégala en cualquier template Liquid. Editar código abre el editor de código del tema.
• Integración automática con el Cart drawer (Parte superior del Cart drawer o Parte inferior del Cart drawer): un método antiguo, marcado como Obsoleto, que no funciona en todos los temas. Mejor usa Colocar barra de progreso. Esta sección solo aparece si tu tienda todavía la usa: en cuanto desmarcas las dos casillas y guardas, desaparece.

Para el checkout, consulta barra de progreso en el checkout.

2:00

0:58

Qué leen los lectores de pantalla y los asistentes de IA de compra

En cada página donde el app embed está activo, Yaco Progress Bar añade un resumen de las ofertas actuales, pensado para los lectores de pantalla y para los asistentes de IA que recorren tu tienda en nombre de un cliente. El resumen no se muestra y no cambia el aspecto de la página. Está presente incluso con el carrito lateral cerrado.

• Solo lista los niveles a los que el visitante tiene derecho: el mercado, el país, las fechas y las reglas de cliente de cada nivel se aplican igual que en la barra.
• Para cada nivel indica su nombre, los regalos que ofrece con su precio normal, su umbral y el avance del carrito, o que el nivel está desbloqueado.
• Cuando un nivel tiene fecha de fin, la indica en la zona horaria de tu tienda. El nivel sale del resumen al terminar, incluso en una página que sigue abierta.
• Cuando un nivel está limitado a algunos países, los nombra. Cuando está limitado por mercado, nombra el país del visitante. Así un asistente que navega desde un país no promete la oferta a un cliente de otro.
• Cuando un nivel de descuento o de regalo no se combina con ningún otro descuento (los tres iconos de combinación desactivados), indica que la oferta no es acumulable con códigos de descuento. Si no, no dice nada sobre la acumulación: el código también tiene que permitirla.
• Cuando una barra solo cuenta una parte del carrito (Filtrado de artículos del carrito o Tipo de compra), lo indica y nombra los productos o colecciones que cuentan, o que no cuentan. Así un asistente no promete avance con un producto que no hace progresar el nivel.
• Sigue el carrito, como la barra, y termina con la fecha en que guardaste la barra por última vez.

La propia barra se anuncia como una barra de progreso, con el nivel en curso y el importe del carrito frente a su umbral.

No hay nada que configurar. No hay resumen cuando la barra está desactivada, cuando ningún nivel se aplica al visitante, ni para los visitantes del grupo de control (holdout) de un test A/B de la barra. Un asistente que solo descarga la página sin abrirla en un navegador no ve el resumen.

Pide una integración personalizada gratuita

Si no encuentras el sitio adecuado, haz clic en Contáctanos en el aviso ¿Necesitas ayuda para colocar la barra de progreso en tu tema?. El equipo de Yaco coloca la barra por ti, gratis. Añadir tu código de solicitud de colaborador es opcional, pero agiliza el proceso: Shopify te transmite nuestra solicitud de colaborador y, en cuanto la aceptas (desde el correo de Shopify o en Configuración › Usuarios), podemos abrir tu tienda, aunque esté protegida con contraseña. Salvo que nos indiques otra cosa, la barra se coloca en tu carrito lateral, justo debajo de su encabezado; pídenos otro sitio si lo prefieres, por ejemplo encima del botón de pago. La mayoría de integraciones se hacen el mismo día o el siguiente día laborable.

Desde el editor de temas, el menú de Yaco ofrece la misma solicitud: Solicitar una integración personalizada gratuita la abre en la app.

Si la barra está colocada pero no se ve, lee la barra no aparece o problemas con el carrito lateral.