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ú Ubicaciones de Yaco. Haz clic en Añadir barra de progreso (o Añadir otra ubicación si ya existe una) y luego en el elemento de la página donde debe aparecer la barra. Ese clic termina la ubicación: la barra se muestra como vista previa y se abre el formulario. Haz clic en Guardar para conservarla, o en Cancelar para descartarla; no se guarda nada antes de Guardar.
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.

Al hacer clic, la barra toma los márgenes laterales del elemento señalado. Si ese elemento llega hasta el borde de la pantalla, como una imagen de producto en móvil, la barra se alinea con el contenido de al lado, por ejemplo el título del producto. Esos márgenes valen para todos los tamaños de pantalla: ajústalos en Disposición, en el formulario de la ubicación, si hace falta.

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. Mientras eliges, el menú se reduce a una línea con un botón Cancelar para que la página siga visible. En un carrito lateral estrecho o en la vista previa móvil del editor de temas, se ancla en la parte inferior; arrastra su asa hacia arriba para llevarlo arriba, o hacia abajo para plegarlo a su barra de título. Un clic en el asa o en el título lo pliega o lo despliega.

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.
• Disposición: el espacio exterior e interior de cada lado (arriba, derecha, abajo e izquierda, cada uno por separado), y el Ancho: Completo, o Limitado a un ancho máximo en px, alineado a la Izquierda, al Centro o a la Derecha. Recuperar del tema recalcula el espaciado y el ancho como al ubicar la barra, y conserva el marco.
• Marco: un color de Fondo, un Borde (grosor en px y color), un Radio de esquina y una Sombra (Ninguna, Suave, Media o Fuerte) alrededor de la barra, solo para esta ubicación. Un color de borde elegido antes del grosor dibuja un borde de 1 px; vacía el color o pon el grosor a 0 para quitar el borde. Los colores y el aspecto de la barra en sí siguen en su diseño.
• Nombres de clases CSS y CSS del contenedor: para desarrolladores, cualquier otro CSS. Disposición y Marco escriben en el mismo CSS del contenedor: un cambio en uno se ve en el otro. Una sombra escrita a mano aparece como Personalizada (ajustes para desarrolladores).

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

Cada ubicación usa tu diseño predeterminado, salvo que elijas otro en Diseño. Para mostrar la barra de otra forma en el carrito lateral y en la página de producto, añade una ubicación por sitio y ajusta su Filtro de niveles y su Condición de visibilidad: no hace falta un segundo diseño. Créalo solo si una ubicación necesita otro aspecto.

En el editor de temas, el formulario muestra estos ajustes con etiquetas cortas, uno por línea: Tipo, Posición, Elemento, Visibilidad, Plantillas, y luego Niveles y Diseño para una barra, o Recomendación para recomendaciones. Debajo, Disposición muestra el espaciado como una caja: los campos exteriores alrededor de los interiores, cada uno en el lado que ajusta. Al pasar el ratón por un campo o hacer clic en él, ese lado se resalta en la página: el espacio exterior en naranja, el interior en verde. Escribe un número en px, o un valor como auto o 2em. Luego viene Marco. El nombre de la ubicación y el interruptor Activo están arriba. Para señalar otro sitio, haz clic en el botón de flecha (una flecha que hace clic) junto a Elemento y luego en la página. La Disposición (espaciado y ancho máximo, incluidos los escritos en el CSS del contenedor) se recalcula entonces para el nuevo elemento; el Marco y las demás reglas del CSS del contenedor se mantienen. Nombres de clases CSS, CSS del contenedor y, para recomendaciones, ID de integración (Analíticas) están en Ajustes para desarrolladores, plegado al final del formulario; la línea bajo ese título indica lo que contiene. Eliminar está abajo a la izquierda, lejos de Cancelar y Guardar. Cancelar (o la cruz) devuelve una ubicación modificada a su estado guardado.

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.
• En el editor de temas, en un tema sin ubicaciones, Reutilizar ubicaciones de otras tiendas te propone las mismas ubicaciones. Las que marques se muestran en la página como vista previa; no se guarda nada hasta que haces clic en Importar. Si marcaste ubicaciones tú mismo y cierras el panel sin importarlas, la app te avisa primero: haz clic en Salir sin importar para descartarlas.
• En el editor de temas, si una importación falla, el panel lo indica y sigue abierto con tu selección: haz clic en Importar para volver a intentarlo.
• 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 (las tres clases desmarcadas en Se combina con), 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.
• En el plan gratuito, termina con «Ofertas gestionadas con Yaco Progress Bar de Yaco Studio», en el idioma del visitante. Esta línea es texto simple, sin enlace, y tampoco se muestra. Los planes de pago, Starter incluido, no la añaden.

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 sin la barra de un test A/B. 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: el enlace ¿Necesitas ayuda? Integración a medida gratuita, al pie del menú, la abre en la app. Sigue visible mientras eliges dónde colocar la barra.

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