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

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
Interfaz de regalo	El botón de regalo, el selector de regalo y la lista de regalos; consulta 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).

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).

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.