Elemento Añadir al Carrito Fijo

Acerca del Elemento Añadir al Carrito Fijo

Un botón Añadir al Carrito Fijo en una página web es un botón que permanece visible y se "adhiere" a la pantalla mientras se desplaza. Es un valioso elemento de interfaz de usuario en sitios web de comercio electrónico que mejora la experiencia de compra al proporcionar fácil acceso al carrito y agilizar el proceso de pago.

Contribuye a un mejor compromiso del usuario, mejores tasas de conversión y satisfacción general del usuario al reducir la fricción en el recorrido de compra en línea.

¿Cómo Agregar un Elemento Añadir al Carrito Fijo a su Página?

Para incorporar un botón Añadir al Carrito Fijo en el Editor de GemPages v7, siga estos pasos:

Paso 1: Acceda al Panel de Control de GemPages > Páginas > Colecciones, luego haga clic en su página de colección objetivo para entrar al editor.

Paso 2: Desde la barra lateral izquierda, busque "sticky add to cart" (agregar al carrito fijo) y arrástre y suélte el elemento a su página.

Importante: El elemento Añadir al Carrito Fijo solo se puede colocar en la primera o la última sección de la página.

Esta limitación es intencionada y ayuda a garantizar que la barra fija funcione correctamente en diferentes dispositivos y con distintos comportamientos de desplazamiento. Dado que el elemento está diseñado para permanecer fijo en la pantalla mientras los clientes se desplazan, colocarlo en el centro de la página podría provocar conflictos de diseño, problemas de superposición o un comportamiento de visualización inconsistente con otras secciones.

Para mantener una experiencia de compra estable y fluida, GemPages solo admite la colocación del elemento Añadir al Carrito Fijo en la sección superior o inferior de la estructura de la página.

Por defecto, el elemento Añadir al Carrito Fijo viene precargado con componentes esenciales:

• Módulo de Producto (Imagen de producto, Título de producto y Precio de producto)
• Variantes y Muestras de Producto
• Cantidad de Producto
• Añadir al Carrito de Producto

Esta configuración lista para usar garantiza que su barra fija sea funcional de inmediato. Puede simplemente "Guardar" y "Publicar" la página, y el botón Añadir al Carrito Fijo estará listo en su página en vivo. 

Sin embargo, para una integración perfecta con el diseño general de su página, tiene flexibilidad completa para personalizar tanto el Añadir al Carrito Fijo en sí como sus elementos secundarios.

Configurar la pestaña Ajustes

Cuando seleccione el Añadir al Carrito Fijo, descubrirá todas las opciones de configuración convenientemente ubicadas en la barra lateral izquierda, incluyendo:

Diseño

En el campo Diseño , puede elegir la posición del botón Añadir al Carrito Fijo en su página:

• Posición inferior de la página
• Posición superior de la página (el elemento funciona como un encabezado personalizado fijo con botón de carrito)

Algunos comerciantes quieren colocar un botón Añadir al Carrito dentro de su encabezado para que permanezca visible mientras los clientes se desplazan. Dado que un botón Añadir al Carrito de Producto requiere un Módulo de Producto (que no es compatible dentro de un encabezado de tema), la mejor alternativa es usar el elemento Añadir al Carrito Fijo.

Al establecer su posición de diseño en arriba, se comporta como un botón de carrito de encabezado, siempre accesible sin interrumpir el diseño de la página.

Tamaño

El Tamaño le permite controlar las dimensiones generales de su botón Añadir al Carrito Fijo, asegurando que encaje perfectamente en el diseño de su página.

Ancho:  Personalice el ancho del elemento. Puede ingresar un valor específico (en px) en el cuadro, o elegir entre las opciones disponibles:

• Ajustado al contenido (Auto): El botón se ajustará automáticamente para coincidir con el tamaño de su contenido (texto + icono).
• Completo (100%): El botón se expandirá para llenar el ancho completo de su contenedor, haciéndolo más prominente en la página.

Relleno: El relleno define el espaciado interno entre el contenido del botón (texto, icono, precio) y sus bordes.

Fondo

Establezca un color de fondo sólido o de degradado para su botón Añadir al Carrito Fijo. Puede ajustar el color:

• Ingresar el código de color
• Arrastrando o seleccionando de las muestras de color
• Usando el selector de color para seleccionar cualquier color en su página actual
• Eligiendo un color desde la lista Colores recientes  or Colores sugeridos liza

Si prefiere un fondo de imagen, cargue una nueva imagen o elija de su galería para establecerla como fondo del elemento.

Forma

• Borde: Puede cambiar el color del borde, grosor y trazo.
• Esquina: La esquina de la sección puede ser cuadrada, redonda o en forma de píldora. Además, puede ingresar un radio exacto para personalizar la esquina del elemento a su manera.
• Sombra: Agregue una sombra y ajuste su visualización (tamaño, color, desenfoque y distancia).

Opción de visualización

Establezca la condición para definir cuándo su botón Añadir al Carrito Fijo se mostrará en su página. Puede elegir dos opciones como se muestra a continuación:

• Mostrar siempre: El botón Añadir al Carrito Fijo permanecerá visible en todo momento mientras el cliente se desplaza por la página. Esto asegura un acceso rápido al carrito, reduciendo la fricción durante el recorrido de compra.
• Después del primer botón de carrito: Este elemento solo aparecerá después de que el primer botón estándar Añadir al Carrito entre en vista. Esta opción ayuda a evitar redundancia en la parte superior de la página y hace que el botón fijo se sienta más contextual.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la Avanzado y siga las instrucciones de este artículo.

Preguntas frecuentes sobre Elemento Añadir al Carrito Fijo

1. ¿El elemento Añadir al Carrito Fijo es responsive en móvil?

Sí. El elemento Añadir al Carrito Fijo predeterminado es completamente responsive. En móvil, se muestra en un formato simplificado (generalmente solo el botón) para ahorrar espacio y asegurar un diseño limpio.

2. ¿Por qué no aparece mi botón Añadir al Carrito Fijo en la página en vivo?

Una causa común es que la Opción de visualización esté configurado como "Después del primer botón de carrito" mientras su página no contiene ningún botón Añadir al Carrito por encima del pliegue. En ese caso, la barra fija nunca aparecerá.

Cómo solucionarlo:

• Cambie la Opción de visualización a "Mostrar siempre" or
• Agregue un botón Añadir al Carrito a su página si prefiere la opción de visualización "Después del primer botón de carrito".

3. ¿Puedo usar un fondo de imagen para el elemento Añadir al Carrito Fijo?

Sí. En la sección Fondo, puede establecer un color sólido/de degradado o cargar una imagen para usar como fondo del botón.

4. ¿Cómo puedo cambiar la forma del botón Añadir al Carrito Fijo?

En la sección Forma , puede personalizar el borde, radio de esquina (cuadrado, redondo o en forma de píldora) y sombra.

5. El botón Añadir al Carrito Fijo no se muestra en móvil. ¿Qué debo hacer?

Esto puede suceder por varias razones:

• Configuración de visibilidad: Verifique la configuración del elemento en la pestaña Avanzada y asegúrese de que no esté oculto en móvil.
• Opción de visualización: Si está configurado en Después del primer botón de carrito, pero su diseño móvil no incluye un botón estándar Añadir al Carrito por encima del pliegue, la barra fija no aparecerá. Cambie a Mostrar siempre.
• Diferencias de diseño en móvil: En teléfonos, el Añadir al Carrito Fijo puede mostrarse en una versión simplificada (solo botón). Desplácese hacia abajo para confirmar que no esté minimizado.

6. ¿Puede el Añadir al Carrito Fijo reemplazar el botón de carrito del encabezado de mi tema?

Sí, en la práctica. Si el encabezado de su tema no tiene un botón de carrito, simplemente habilite el Añadir al Carrito Fijo en la parte superior de la página. Proporciona la misma funcionalidad, siempre visible mientras los clientes se desplazan.

7. ¿Puedo utilizar el elemento Añadir al Carrito Fijo como un botón fijo normal (no Añadir al carrito)?

El elemento Añadir al Carrito Fijo está diseñado específicamente para las acciones de añadir productos al carrito. Requiere un contexto de producto y no está pensado para utilizarse como un botón CTA general.

Sin embargo, si necesita un botón CTA fijo que enlace a otra página (por ejemplo, una colección, una página de destino, etc.), le recomendamos que elimine todos los elementos incluidos dentro del elemento Añadir al Carrito Fijo y, a continuación, coloque el Elemento Botón .

Comprobar Esta guía en vídeo para obtener más instrucciones.