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

> Haz clic en Colocar barra de progreso y luego en el punto del tema donde debe ir. Los bloques de app, una línea de código y una integración gratuita cubren el resto.

Actualizado el 2026-09-25 · https://www.yaco.studio/es/docs/ubicacion-tema

## 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 de la barra de progreso** 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**.

Si el inspector de temas de Shopify está activo, el menú de Yaco te pide que lo desactives primero: la colocación no funciona mientras está activo.

## Ajustes de una ubicación

Cada ubicación tiene sus propios ajustes, en el editor de temas o desde la lista **Integraciones con el 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 objetivos**: mostrar todos los niveles, solo algunos, u ocultar algunos en esta ubicación.
- **Diseño**: el [diseño](https://www.yaco.studio/es/docs/diseno) 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**.

## Reutiliza ubicaciones de otro tema o de otra tienda

- **Importar**, en la tarjeta **Integraciones con el 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**: haz clic en **Ir al template de página de producto** y, en **Template › Información del producto**, haz clic en **Añadir bloque** y elige **Yaco Progress Bar**. Para la página de carrito, usa **Ir al template de la página de carrito** y la sección **Template › Subtotal**.
- **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**.

Para el checkout, consulta [barra de progreso en el checkout](https://www.yaco.studio/es/docs/checkout).

## 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. La mayoría de integraciones se hacen el mismo día o el siguiente día laborable.

Si la barra está colocada pero no se ve, lee [la barra no aparece](https://www.yaco.studio/es/docs/barra-no-aparece) o [problemas con el carrito lateral](https://www.yaco.studio/es/docs/problemas-carrito-lateral).