# Personalizar el aspecto de la barra de progreso del carrito sin código

> La página Diseño ajusta la barra sin código: disposición de los niveles, colores, marcadores, precios, imágenes, márgenes en móvil y CSS, guardados como diseños reutilizables.

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

## Dónde están los ajustes de diseño

Todo lo visual se ajusta en la página **Diseño** de Yaco Progress Bar, dividida en pestañas, una por cada parte de la barra:

| Pestaña | Qué controla |
|---|---|
| **Estilo de las barras** | Disposición de los niveles, colores, altura, borde, sombra, redondeo |
| **Imágenes** | Iconos de los niveles y sus colores, alcanzados o no |
| **Nombre del objetivo** | Si se muestran los nombres de los niveles, su tamaño y colores |
| **Precio** | El umbral que aparece bajo cada nivel |
| **Marcador** | Los puntos o imágenes que marcan cada nivel en la barra |
| **Importe** | El valor de progreso y el total |
| **Contenedor** | Márgenes, padding, borde, fondo, ancho máximo, CSS personalizado |
| **Mensaje de éxito** | La línea de mensaje; consulta [mensaje de éxito](https://www.yaco.studio/es/docs/mensaje-de-exito) |
| **Interfaz de regalo** | El botón de regalo, el selector de regalo y la lista de regalos; consulta [selector de regalo](https://www.yaco.studio/es/docs/selector-de-regalo) |
| **Presets** | Diseños listos para usar como punto de partida |

Una vista previa en directo sigue tus cambios; nada llega a tu tienda antes de **Guardar** (consulta [guardar y publicar](https://www.yaco.studio/es/docs/guardar-y-publicar)).

## Elegir cómo se reparten los niveles

En **Estilo de las barras**, **Visualización de objetivos** define cómo se reparten los niveles la barra:

- **Simétrica**: cada nivel tiene el mismo ancho.
- **Ancho completo**: los niveles se estiran a todo el ancho.
- **Proporcional**: el ancho de cada nivel sigue su umbral.
- **Uno por uno**: solo se muestra un nivel a la vez.

**Limitar los objetivos mostrados** está activado por defecto. La barra muestra como máximo 4 niveles a la vez (**Objetivos mostrados (máx.)**) y mantiene siempre al menos 2 niveles no alcanzados a la vista (**Objetivos no alcanzados mostrados (mín.)**). La ventana avanza a medida que se desbloquean niveles. Desmarca la casilla para mostrarlos todos. No se aplica en el modo **Uno por uno**.

La misma pestaña incluye **Alineación del precio** y los colores de la barra; altura, borde, sombra y redondeo están en **Opciones avanzadas**.

## Dar estilo a marcadores, precios, imágenes e importes

- **Marcador**: activa **Mostrar marcador**, o usa la imagen de cada nivel con **Usar la imagen del objetivo como marcador**. Los colores pueden cambiar según el estado: no alcanzado, alcanzado, todos alcanzados.
- **Precio**: **Mostrar el precio del objetivo**, y luego tamaño, negrita, colores por estado, padding y márgenes.
- **Imágenes**: **Mostrar la imagen del objetivo** activa las imágenes en todos los niveles. La imagen de cada nivel se elige en su tarjeta; esta pestaña solo ajusta tamaño, colores, redondeo y sombra.
- **Importe**: **Mostrar el valor de progresión** y **Mostrar el valor total**, con color, tamaño y espaciado.

## Ajustar los márgenes en ordenador y en móvil

En **Contenedor**, cambia entre **Por defecto** y **Móvil** en la parte superior para ajustar márgenes y padding según la pantalla. **Ancho máximo** solo se aplica en ordenador. Estos valores se aplican allí donde se use el diseño; los ajustes propios de una ubicación en la integración con el tema pueden sustituirlos (consulta [ubicación en el tema](https://www.yaco.studio/es/docs/ubicacion-tema)).

## Ir más lejos con CSS personalizado

Al final de **Contenedor**, **CSS personalizado de la barra de progreso** acepta tu propio CSS y **Nombres de clases CSS** añade clases al contenedor de la barra. El CSS se revisa al guardar y se limita a la barra: tus reglas no afectan al resto del tema.

## Partir de un preset o de otra tienda

- **Presets**: elige un diseño listo para usar y haz clic en **Aplicar**. Sustituye el estilo del diseño que estás editando.
- **Importar desde otra tienda**: ¿gestionas varias tiendas? El icono junto a **Añadir diseño**, o la tarjeta **Reutilizar un diseño de otra tienda** en **Presets**, copia uno de sus diseños como diseño nuevo, sin tocar los existentes. Una tienda aparece si usas el mismo email de Shopify verificado en ambas y ya abriste Yaco Progress Bar en ella al menos una vez.

En ambos casos, haz clic en **Guardar** para conservar el resultado.

## Usar varios diseños

**Añadir diseño** y **Duplicar diseño** crean diseños adicionales, por ejemplo uno para el carrito lateral y otro para la página de producto. Un diseño es el predeterminado; **Usar este diseño** asigna otro a ubicaciones concretas.