Cómo añadir una barra fija de Añadir al carrito

La barra fija de añadir al carrito mantiene tus ofertas al alcance mientras los compradores navegan por la página del producto. Su botón puede desplazar al comprador de vuelta a las ofertas o añadir directamente al carrito la oferta seleccionada. Puedes mostrarla después de que los compradores se desplacen más allá del widget o desde que se carga la página.

Activar la barra fija de añadir al carrito

La barra fija se configura por paquete dentro del editor de paquetes.

1. Abre el paquete que quieres editar.
2. Abre la pestaña Complementos y, después, expande Añadir al carrito fijo.
3. Activa el interruptor situado junto al título Añadir al carrito fijo.

La barra aparece en las páginas de producto donde se muestra este paquete, así que asegúrate de que el paquete esté publicado y de que el widget esté configurado para mostrarse en los productos correctos.

Elige qué hace el botón

La acción del botón tiene dos opciones:

• Desplazarse hasta las ofertas devuelve al comprador al widget para elegir una oferta.
• Añadir la oferta seleccionada al carrito muestra la oferta seleccionada y la añade con los productos, regalos y extras elegidos.

En el modo de añadir al carrito, la barra sigue los cambios en la oferta seleccionada, las variantes, las cantidades, las suscripciones y los complementos. Su total coincide con el pie del widget. Puedes activar Mostrar precio, Mostrar precio original, Mostrar etiqueta de ahorro y Mostrar precio dentro del botón.

Si el comprador aún debe elegir una variante o completar un espacio del paquete, el botón lo lleva al widget para terminar. Si no hay ninguna oferta seleccionada, le pide que elija opciones. En los temas que impiden añadir directamente, el botón vuelve a desplazarse hasta el widget. Los descuentos que solo tienen complementos opcionales usan la acción de desplazarse hasta las ofertas para que los compradores puedan elegir en el widget. Este botón usa el flujo normal del carrito, no Comprar ahora.

Elige cuándo aparece la barra

En Mostrar la barra, elige Después de que el widget salga de la vista o Siempre, desde que se carga la página. Ambas opciones funcionan con cualquiera de las acciones del botón. Las barras existentes mantienen el comportamiento posterior al desplazamiento, a menos que lo cambies.

Con Siempre seleccionado, el modo de añadir al carrito comienza con la oferta preseleccionada y sigue las selecciones posteriores. Si permites que la página se cargue sin ninguna oferta seleccionada, los compradores deberán elegir una oferta antes de que la barra pueda añadirla.

Elige un diseño: Flotante o Fijo

Usa la opción Diseño de la barra fija para elegir cómo se sitúa la barra en la página:

• Flotante: una tarjeta centrada, separada de los bordes por un pequeño espacio y con las esquinas redondeadas.
• Fijo: una barra de ancho completo fijada al borde inferior, que se extiende de un extremo al otro.

Los dos diseños gestionan de forma diferente el redondeo de las esquinas. Cambiar a Fijo establece en 0 el radio de las esquinas de la barra para que quede alineada con los bordes de la pantalla. Cambiar a Flotante restaura las esquinas redondeadas si el radio era 0. Después puedes ajustar el radio de las esquinas en los controles de estilo, que se explican más adelante, pero Fijo está diseñado para mantener las esquinas rectas.

Mostrar en computadoras y dispositivos móviles

Dos casillas controlan dónde aparece la barra:

• Mostrar en computadoras
• Mostrar en dispositivos móviles

Ambas están activadas de forma predeterminada. Puedes desactivar cualquiera de ellas, por ejemplo, para mostrar la barra fija solo en dispositivos móviles, donde es más probable que el botón original de añadir al carrito salga de la vista al desplazarse.

Comprueba la página móvil real con el título y el precio de oferta más largos. En pantallas estrechas, la barra simplifica algunos detalles del precio original, los ahorros y el precio del botón para mantener la acción legible. No esperes que todos los detalles de escritorio aparezcan en un teléfono pequeño.

Configura el título y el texto del botón

En el modo de desplazamiento hasta las ofertas, la barra fija tiene dos campos de texto:

• Título: el texto que aparece junto al botón. Admite variables de plantilla, por lo que puedes insertar valores dinámicos como {{product_title}} (el valor predeterminado), {{saved_percentage}} o {{price_total}}. Usa el insertador de variables del campo para añadirlas.
• Texto del botón: la etiqueta del botón fijo. El valor predeterminado es "Elegir paquete".

El modo de añadir al carrito muestra el título de la oferta seleccionada y usa su propio campo Texto del botón Añadir al carrito. Los dos textos de botón tienen traducciones independientes, por lo que cambiar el texto de un modo no sobrescribe el del otro.

En Texto de la barra fija, también puedes cambiar la etiqueta de regalo gratuito, las etiquetas de complemento individual y múltiple, y el texto del botón Elegir opciones. Conserva {{count}} en el mensaje de complementos múltiples para que pueda mostrar la cantidad real.

Añade la cuenta regresiva integrada, de forma opcional

Puedes mostrar una cuenta regresiva dentro de la barra fija con la casilla Mostrar cuenta regresiva en la barra fija.

Esta opción requiere que el temporizador de cuenta regresiva esté activado en el mismo paquete. Si el temporizador de cuenta regresiva está desactivado, la casilla aparece deshabilitada y no se puede seleccionar. Cuando actives el temporizador de cuenta regresiva, podrás activar esta opción.

La cuenta regresiva integrada reutiliza el título compacto de la configuración del temporizador de cuenta regresiva y su estilo sigue el tema de la barra fija.

Si después desactivas el temporizador de cuenta regresiva, la cuenta regresiva de la barra fija se desactiva automáticamente.

Personaliza la barra fija

Abre el grupo Estilo de Añadir al carrito fijo para ajustar la apariencia. Los controles están agrupados en acordeones:

• Fondo: color sólido o degradado para la barra.
• Contenedor: color y ancho del borde, radio de las esquinas, relleno y sombra.
• Título: color del texto, tamaño de fuente y grosor de fuente.
• Precio: estilo del texto del precio en el modo de añadir al carrito.
• Botón: color de fondo, color del texto, tamaño de fuente, grosor de fuente, relleno y radio de las esquinas.
• Imagen del producto: tamaño de la imagen, radio de las esquinas, ancho del borde y color del borde.
• Cuenta regresiva: color de fondo, color del texto, tamaño de fuente, grosor de fuente y relleno. Este grupo solo aparece cuando la cuenta regresiva integrada está activada.

Para conseguir rápidamente una apariencia coordinada, usa el selector de colores preestablecidos situado en la parte superior de la sección. También ofrece Combinar las esquinas de Añadir al carrito fijo con el widget principal, que establece el radio de las esquinas de la barra para que coincida con el del widget principal del paquete y ambos se vean coherentes.

Nota sobre el radio de las esquinas

Recuerda que el diseño Fijo fuerza un radio de las esquinas de 0. Si estableces un radio redondeado en el estilo del Contenedor y las esquinas siguen viéndose rectas, comprueba que el diseño esté configurado como Flotante.

Guarda y prueba ambas acciones

Guarda y prueba una página de producto específica con el descuento activo. En el modo de desplazamiento, desplázate más allá de las ofertas y usa el botón fijo para volver. En el modo de añadir al carrito, selecciona una oferta y sus variantes y, después, añádela mediante el botón fijo. Comprueba las cantidades, las variantes y el total en el carrito y en el proceso de pago. Repite la prueba en dispositivos móviles y prueba una opción no disponible o incompleta: la barra debería llevar al comprador de vuelta para terminar su selección.

En nuestro ejemplo, Comprar 2 añade dos bolsas Ivory Small con un subtotal de mercancía de $43.20 después de aplicar un 10 % de descuento. Elegir la combinación Blush Small no disponible cambia la acción fija a Elegir opciones; cambiarla a un tamaño disponible restaura Añadir al carrito. La cuenta regresiva sigue siendo visual y no detiene el descuento al llegar a cero. Consulta Temporizador de cuenta regresiva para conocer el comportamiento al vencer.