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 y de las barras, colores, altura, borde, sombra, redondeo
Imágenes	Iconos de los niveles y sus colores, alcanzados o no
Nombre del nivel	Si se muestran los nombres de los niveles, su tamaño y colores
Umbral	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 y el redondeo de los importes; consulta mensaje de éxito
Interfaz de regalo	El botón de regalo, el selector de regalo y la lista de regalos, y la elección entre lista y botón para las barras de este diseño; 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 niveles 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.

En Proporcional, Proporciones manuales permite fijar la parte de la barra de cada nivel. Cada nivel empieza en 1, así que la barra se reparte a partes iguales hasta que cambie un valor. Un nivel en 0 no ocupa ancho: se coloca al inicio de la barra y los demás niveles se reparten todo el espacio, también cuando las barras están encadenadas. Si todos los niveles valen 0, se reparten la barra a partes iguales.

Proporcional y Uno por uno requieren al menos 2 niveles activos en la misma barra (las barras encadenadas cuentan como una sola). Con un nivel por barra, ambas opciones aparecen desactivadas y un diseño ya configurado en una de ellas se muestra como Simétrica.

Limitar los niveles mostrados está desactivado por defecto: la barra muestra todos los niveles. Marca la casilla para mostrar como máximo 4 a la vez (Niveles mostrados (máx.)), manteniendo siempre al menos 2 niveles no alcanzados a la vista (Niveles no alcanzados mostrados (mín.)). La ventana avanza a medida que se desbloquean niveles. No se aplica en el modo Uno por uno. Con Encadenar barras de progreso, el límite abarca todas las barras encadenadas: una barra sin ningún nivel dentro de la ventana se oculta hasta que la ventana la alcanza. Esto vale para las barras encadenadas por importe y por peso, cuyos niveles se intercalan por umbral. Las barras por cantidad consecutivas se dibujan como una sola barra pero cada una mantiene su propio límite, porque pueden contar productos distintos. Dos barras así con un límite de 4 pueden mostrar hasta 8 niveles.

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.

Mantener un degradado fijo en toda la barra

Por defecto, un degradado elegido en Color por defecto de la barra se desliza con el relleno: sea cual sea el carrito, el extremo del relleno muestra siempre el último color. Marca Degradado fijo en toda la barra para pintar el degradado una sola vez sobre toda la barra. El relleno lo descubre a medida que crece el carrito y, con Encadenar barras de progreso, un único degradado va de la primera barra a la última. Los marcadores alcanzados sin color alcanzado propio toman el color de la barra que tienen debajo, incluso cuando se alcanzan todos los niveles: el ajuste Color por defecto del marcador cuando todos están alcanzados se oculta y se ignora en este modo. Un degradado animado se queda quieto en este modo.

Generar desde los marcadores crea ese degradado por ti: un color por nivel, el de su marcador alcanzado (o el fondo de su imagen cuando las imágenes sirven de marcadores), colocado donde está el marcador en la vista previa. Hacen falta al menos dos colores distintos. El resultado se abre en el editor de degradado, donde aún puedes ajustar cada color y cada posición. Vuelve a hacer clic después de añadir o mover un nivel.

Apilar varias barras en un mismo bloque

Cuando al menos dos barras tienen niveles, por ejemplo una barra de importe para el envío gratis y una barra de cantidad para «Compra 3 y obtén un 20 % de descuento», Disposición de las barras en Estilo de las barras fija cómo comparten el bloque:

• Lado a lado (por defecto): las barras están en una misma línea, con una sola línea de mensaje para todas.
• Apiladas: cada barra tiene su línea, una debajo de otra, con su propio mensaje: el texto de su próximo nivel y, cuando se alcanzan todos sus niveles, su propio mensaje de éxito (consulta mensaje de éxito).

Espacio entre las barras ajusta la separación entre las líneas apiladas (16 px por defecto). Con Encadenar barras de progreso marcado, las barras consecutivas del mismo tipo (importe, cantidad…) comparten una línea y se leen como una sola barra. Una barra de otro tipo entre ellas las separa, aunque un bloque no la muestre. El botón de regalo y la lista de regalos quedan bajo la última línea. La disposición pertenece al diseño: un carrito lateral puede apilar sus barras mientras la página de producto las mantiene lado a lado.

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 nivel como marcador. Los colores pueden cambiar según el estado: no alcanzado, alcanzado, todos alcanzados.
• Umbral: Mostrar el umbral del nivel, y luego tamaño, negrita, colores por estado, padding y márgenes. El texto del umbral se puede reescribir para cada nivel: consulta añadir un nivel.
• Imágenes: Mostrar la imagen del nivel 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. En un nivel de regalo, Imagen y luego Imagen del producto de regalo es la opción por defecto al activar la imagen: el nivel muestra la imagen de la variante regalada (o la imagen principal del producto) y la sigue cuando cambia en Shopify. Con varios regalos, elige el producto, o la variante cuando un producto se regala en varias; sin imagen, se usa la del siguiente producto de regalo y, si no, el icono de regalo.
• Importe: Mostrar el valor de progresión y Mostrar el valor total, con color, tamaño y espaciado.

4:26

Redondear los importes a la unidad

En la pestaña Mensaje de éxito, junto a Mostrar siempre los decimales, marca Redondear los importes a la unidad para quitar los céntimos de todos los importes que muestra la barra con este diseño. El redondeo vale para todas las divisas, se convierta el importe para un mercado o no:

• los umbrales y el importe restante se redondean hacia arriba;
• el total del carrito y los importes de descuento se redondean hacia abajo: la barra nunca promete más de lo que el cliente obtendrá;
• el importe restante se cuenta desde el umbral mostrado: el total y el importe restante suman siempre ese umbral. Mientras no se alcanza el nivel, el importe restante nunca muestra 0: vale al menos 1.

Con niveles de 100,50 € y 200,50 € y un carrito de 24,95 €, la barra muestra «Quedan 77 €», umbrales de «101 €» y «201 €» y un total de «24 €».

El redondeo solo cambia lo que se escribe: un nivel se desbloquea siempre en su umbral exacto. El nivel de 100,50 € se desbloquea a 100,50 € aunque muestre «101 €». Una vez alcanzado el último nivel de la barra, el total nunca muestra menos que su umbral: un carrito de 100,50 € muestra «101 €», no «100 €».

Los asistentes de IA y los lectores de pantalla leen siempre los importes exactos: el resumen de tus ofertas y el texto leído para la barra conservan los céntimos («100,50 €», «Quedan 75,55 €»).

Los pesos, las cantidades y los números de pedidos no se redondean. Mientras el redondeo está activo, Mostrar siempre los decimales aparece en gris. En el checkout se aplica el ajuste del diseño predeterminado. Esta opción sustituye a Redondear hacia arriba los valores convertidos para evitar mostrar decimales, que estaba en las Opciones avanzadas del nivel: si la tenías marcada en un nivel activo, ahora está marcada en tus diseños.

Elegir adónde lleva un clic en un nivel

En los ajustes de cada nivel, la tarjeta Al hacer clic define qué pasa cuando un cliente hace clic en el nivel en la barra, o en un regalo de la lista inline:

• Sin redirección: el clic no hace nada.
• Página del producto de regalo: la opción por defecto de un nivel de regalo.
• Otro producto: cualquier producto de tu tienda.
• Una página o URL: una página de tu tienda como /pages/envio o /collections/verano, abierta en el idioma del cliente, o una dirección completa con https://.

Cualquier tipo de nivel puede llevar a un producto o a una página, no solo los niveles de regalo. El ajuste pertenece al diseño seleccionado: cambia de diseño en la parte superior de la página para configurarlo en otro.

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; tu mensaje de éxito, los textos de regalo y sus traducciones se mantienen.
• 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. Cada diseño de la lista muestra sus colores principales y las ubicaciones donde aparece en esa tienda, para distinguir fácilmente dos diseños llamados «Default».

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, o abre la página del carrito en el editor de temas: en el bloque de app Yaco progress bar, elígelo por su nombre en Diseño.

Cada diseño también puede mostrar a su manera los niveles con varios regalos: en lista en una barra y con el botón Elegir un regalo en otra. Se ajusta en la tarjeta Visualización de los regalos de la pestaña Interfaz de regalo (consulta selector de regalo).