Elemento del Botón Agregar al Carrito del Producto

Acerca del Botón del Carrito del Producto

El botón Agregar al Carrito tiene una importancia significativa para cualquier tienda, ya que permite a los clientes agregar productos a su carrito de compras con un simple clic. En GemPages, este botón se denomina Botón del Carrito del Producto, y ofrece una amplia gama de funcionalidades más allá de simplemente agregar productos a los carritos.

Para agregar el Botón del Carrito del Producto a su página, por favor siga los pasos a continuación.  

Paso 1: En la sección Panel de Control de GemPages, seleccione la página en la que desea trabajar e ingrese al Editor.

Paso 2: Dado que el botón del carrito de productos es un elemento secundario del Elemento Producto, debe estar anidado dentro de un módulo de Producto para funcionar correctamente. Si no tiene un módulo de Producto, arrastre y suelte uno en su página.

Paso 3: Arrastre y suelte el elemento Botón Carrito de Producto dentro del módulo Producto, en el lugar de su preferido.

Una vez agregado, haga clic en el elemento para acceder a las configuraciones en la barra lateral izquierda La configuración se divide en dos pestañas principales: Configuración y Avanzado.

Configurar la Pestaña de Configuración

Diseño

Elija la configuración de diseño del botón para adaptarse al diseño de su página.

Fuente de Producto

Especifique a qué producto debe estar vinculado el botón. Esto garantiza que el botón funcione correctamente sincronizándose con los datos correctos del producto.

Tamaño

• Ancho: Establezca el ancho del botón.
• Altura: Ajuste la altura del botón.
• Relleno: : Defina el relleno dentro del botón.

Fondo

Personalice el color de fondo del botón utilizando el selector de color. Esto ayuda a hacer coincidir el botón con el estilo de su marca.

Forma

• Borde: Elija el estilo de borde, como Línea o Sólido, para darle al botón un contorno visual.
• Esquina: : Seleccione qué tan redondeadas deben ser las esquinas (Afiladas, Redondeadas o Píldora).
• Sombra: : Aplique y personalice una sombra paralela para darle al botón una apariencia elevada o en capas.

Ícono

• Elegir Ícono: Seleccione un icono para mostrar en el botón, o puede cargar un nuevo archivo SVG.
• Posición del icono: Posicione el icono en el lado izquierdo o derecho del texto.
• Espaciado: Ajuste el espaciado entre el icono y el texto.

Texto

• Contenido: Puede personalizar completamente el texto mostrado en el botón del Carrito. El texto predeterminado es "AGREGAR AL CARRITO", pero puede modificarlo a cualquier texto que se alinee con su diseño y objetivos.
• Estilos: Seleccione un estilo para la etiqueta del botón del carrito de los estilos predeterminados disponibles.
• Fuente: Elija la fuente para su etiqueta de texto del menú desplegable. En caso de que desee utilizar otras fuentes, consulte cómo usar una Fuente personalizada aquí.
• Tamaños: Determine su tamaño de fuente preferido.

Haga clic en el elemento "Mostrar más" para revelar más opciones de personalización. 

• Grosor de Fuente:Elija su grosor de fuente deseado del menú desplegable proporcionado.
• Altura de LíneaAjuste la altura del texto especificando un valor porcentual.
• Espacio entre letrasModifique el espaciado entre letras ingresando un valor en píxeles.
• Transformación: Transforme el texto a mayúsculas, minúsculas o con mayúscula inicial según lo deseado.

Separador

Active esta opción para agregar un separador visual entre el texto y el precio dentro del botón. Puede elegir entre estilos de línea, punto o barra.

Precio

Habilite esta opción para mostrar el precio del producto en el botón.

• Diseño: Seleccione el diseño preferido para la visualización del precio.
• Precio de Producto: Personalice cómo aparece el precio actual.
• Precio de Comparación: Opcionalmente muestre el precio original (tachado) para promociones.

Efecto al Pasar el Cursor

Personalice el comportamiento del botón al pasar el cursor.

• Fondo: Establezca un nuevo color de fondo al pasar el cursor.
• Color de Texto: Cambie el color del texto al pasar el cursor para una mejor interactividad.

Estado de Agotado

Esta opción le permite personalizar la visualización del botón del carrito cuando el inventario del producto llega a 0. Al activar el interruptor de Estilo Personalizado, se revelarán opciones de Estilo Personalizado , se revelarán opciones de estilo adicionales para el botón, permitiéndole personalizar aún más su apariencia.

Redirigir a

Esta opción define qué sucederá después de que un cliente haga clic en el botón Agregar al Carrito. Puede elegir entre las siguientes acciones:

• Seguir comprando: Sin redirección. El cliente permanece en la página actual después de agregar el producto al carrito.
• Ir al pago:Dirige al cliente a la página de pago predeterminada de Shopify con los artículos existentes en el carrito (si los hay).
• Abrir carrito: Abre el cajón del carrito o la página del carrito, dependiendo de la configuración de su tema.
• Abrir URL: Redirige al usuario a una URL específica. Aparecerá un nuevo campo de entrada para que pegue el enlace de destino.

Utilice esta configuración estratégicamente para guiar a los clientes a través de su embudo de conversión. Por ejemplo, llevándolos al carrito para oportunidades de venta cruzada o directamente al pago para compras impulsivas.

Alineación

Elija la alineación del botón dentro de su sección: izquierda, centro o derecha.

Nota: La alineación horizontal está deshabilitada cuando el ancho está establecido en 100% o más.

Configurar la pestaña Avanzada

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

Uso con Suscripciones (Agregar al Carrito de Suscripción)

Antes de Comenzar

• Instale y configure una aplicación de suscripción (por ejemplo, Appstle , Recharge, Subify, Seal, etc.) y establezca de Opciones de compra (planes de venta) para el producto en el administrador de Shopify.
• Asegúrese de que el widget de suscripción de la aplicación (alternativa entre suscripción única o por única vez, intervalo de entrega, etc.) esté habilitado para ese producto.

Configurar en GemPages

Paso 1: Coloque el Producto elemento, los selectores de variantes, el widget de suscripción, y Botón del Carrito de Producto dentro del mismo módulo de Producto (orden: selectores → widget → Agregar al Carrito).

Paso 2: In Botón del Carrito de Producto > Configuración > Fuente de Producto, confirmXNUMX que apunta al mismo producto que el widget.

Paso 3: In Redirigir a, prefiera Abrir carrito or Seguir comprando para que el plan de venta se adjunte correctamente antes del pago.

Paso 4: Guarde y publiquesu página. En la página en vivo, seleccione una suscripción en el widget y haga clic en Añadir al Carrito para verificar que el artículo de la línea del carrito se muestra como suscripción.

Notas importantes

• La selección de widgets controla el comportamiento: si se selecciona Suscríbete , la línea del carrito incluye un selling_plan_id; si Una sola vez, no lo hace.
• Coloque el widget de suscripción y el Botón del Carrito del Producto dentro del mismo módulo de Producto (widget encima del botón).
• El botón muestra el precio de la variante; los descuentos/etiquetas de suscripción se muestran en el widget o en el cajón del carrito/pago.
• Prefiera "Abrir carrito" o "Seguir comprando" para la Redirigir a Sección para que el plan de venta se adjunte antes de realizar el pago.
• La variante seleccionada debe pertenecer al plan de ventas del producto.
• Utilice el botón Carrito de producto para las acciones del carrito, no el elemento de botón genérico.

Solución de Problemas de Agregar al Carrito en GemPages

Si su botón "Agregar al Carrito" en GemPages no funciona como se esperaba, aquí hay algunos problemas comunes y sus soluciones:

1. Asegúrese de que el Botón Esté Anidado Dentro de un Módulo de Producto

El Botón del Carrito de Producto debe colocarse dentro de un Módulo de Producto para funcionar correctamente. Si está fuera de este módulo, no funcionará.

La Solución:

• En el Editor de GemPages, arrastre y suelte un Módulo de Producto en su página.
• Luego, coloque el Botón del Carrito de Producto Dentro de este módulo.

Esta configuración garantiza que el botón esté correctamente vinculado a los datos del producto.

 2. Configure correctamente la acción del botón

Asegúrese de que la acción del botón esté configurada como "Agregar al Carrito". Si está configurada para otra acción, como "Enlazar a Página", no agregará productos al carrito.

La Solución:

• Seleccione el elemento Añadir al Carrito en el Editor de GemPages.
• En el panel de configuración a la derecha, asegúrese de que la acción esté configurada como "Agregar al Carrito".

Esta configuración garantiza que el botón realice la acción deseada.

 3. Evite usar el elemento genérico "Botón" para las acciones del carrito

GemPages ofrece un elemento Botón genérico, pero no está diseñado para funcionalidades del carrito. Usarlo para agregar productos al carrito puede provocar problemas.

La Solución: Utilice el Botón del Carrito de Producto en lugar del elemento Botón genérico.

Estos botones especializados están diseñados para acciones del carrito y garantizan un funcionamiento adecuado.

4. Verifique la Visibilidad y Disponibilidad del Producto

Si el producto no está activo o disponible en el canal de ventas de Tienda en Línea, el botón "Agregar al Carrito" no funcionará.

La Solución:

• En su Admin de Shopify, navegue a Productos y seleccione el producto relevante.
• Asegúrese de que el estado del producto sea Activo.
• En Canales de venta y aplicaciones, confirme eso Tienda online esté seleccionada.

Esto garantiza que el producto esté disponible para su compra en su tienda.

Preguntas frecuentes sobre el elemento Añadir producto al carrito

1. ¿Por qué no puedo agregar un botón Agregar al carrito a una sección de tema guardado?

Las secciones de temas guardadas en GemPages no se pueden editar ni añadir nuevos elementos, incluido el botón "Añadir al carrito". Para usar el botón "Añadir al carrito", crea un... nueva sección, inserte todos los elementos necesarios (Producto → Agregar al carrito), luego guardar toda la sección como una nueva sección temática reutilizable.

Conozca más sobre la Sección Temática: Secciones de Tema de GemPages y Preguntas Frecuentes (FAQs) .

2. ¿Por qué no se muestra el precio en el botón Agregar al carrito?

Asegúrese de que Precio El interruptor está habilitado en la pestaña Configuración. Si su producto no tiene precio o no está disponible, es posible que no aparezca.

3. ¿Por qué el botón Agregar al carrito se ve diferente al pasar el mouse sobre él?

Asegúrate de leer Efecto al Pasar el Cursor Configuración. Puede configurar diferentes colores de fondo o texto para el estado de desplazamiento.

4. ¿Por qué está deshabilitada la opción de alineación?

La alineación está deshabilitada cuando el ancho del botón está configurado en un 100% o mayor porque el elemento ya ocupa todo el ancho disponible.

5. ¿Puedo colocar el botón Agregar al carrito dentro de una ventana emergente?

• Use un regular Elemento de botón para abrir la ventana emergente.
• Mantenga el botón Agregar al carrito en la página principal del producto.

6. ¿Cómo puedo hacer que el botón Agregar al carrito abra un carrito deslizante?

No necesitas un código personalizado: configúralo Botón del carrito de productos → Redirigir a → Abrir carrito, luego configure el cajón del carrito de su tema o el carrito deslizante siguiendo estos pasos esta guía.