Skip to main content
El módulo Design te permite personalizar la apariencia de tu carrito, incluidos el diseño, los colores de marca y los estilos de botones.

​
General

​
Heredar fuentes del tema

Esta configuración permite que Upcart use las fuentes definidas en la configuración de tu tema de Shopify. Para ver tus fuentes actuales, abre el Editor de temas de Shopify y ve a la sección de Tipografía.

​
🚧 Vista previa del carrito 🚧

Las fuentes heredadas de tu tema no aparecerán en la ventana de vista previa de Upcart, pero se mostrarán correctamente en tu tienda en vivo.

​
Mostrar precios tachados

Activa esta configuración para mostrar un precio tachado (también conocido como el Compare At Price) junto a cada artículo en el carrito. Esto refleja los precios con descuento, de forma similar a tus páginas de producto. Artículo del carrito que muestra el precio original tachado junto al precio con descuento y el ahorro

​
Habilitar línea de subtotal

Agrega una línea de subtotal al carrito. Activarla también revela un campo Color del texto del subtotal en Colores, de modo que el subtotal se puede estilizar por separado del resto del texto del carrito. Con la configuración desactivada, ese campo de color queda oculto.

​
Ancho del carrito

Controla el ancho del cajón, configurado por separado para cada viewport:
  • Desktop - Default o Wide
  • Mobile - Full (de borde a borde) o Nearly full (un pequeño espacio en el borde)

​
Colores

​
Color de fondo

Establece el color de fondo principal del carrito, excluyendo el pie de página y las tarjetas de upsell.

​
Color de acento del carrito

Controla el color de fondo del pie de página del carrito y de las tarjetas de artículos de upsell. Configuración de Colors de Upcart con el color de acento del carrito aplicado a tarjetas de upsell rosas

​
Color del texto del carrito

Define el color de todo el texto del carrito, excepto el texto de los botones y el texto de ahorro, que se controlan por separado.

​
Color del texto de ahorro

Establece el color del texto de ahorro que se muestra debajo del precio del producto. Artículo del carrito con el texto del importe de ahorro resaltado en magenta

​
Color del texto del subtotal

Establece el color de la línea de subtotal. Este campo solo aparece cuando Habilitar línea de subtotal está activada en General.

​
🚧 Vista previa del carrito 🚧

Es posible que el editor de vista previa no refleje con precisión el estilo final. El tema de tu tienda puede incluir CSS personalizado que afecte el tamaño o el color del texto. Verifica siempre los cambios en tu tienda en vivo.

​
Configuración de botones

Upcart ofrece opciones avanzadas de estilo de botones, incluida la personalización específica del botón de pago. Esto incluye métodos para ajustes de CSS y la integración de las herramientas de marca de Shopify.

​
Radio de esquinas

Ajusta el redondeo de las esquinas de los botones, de 0 px a 40 px. 0 crea esquinas rectas y cuadradas; 40 es el máximo redondeo que permite el deslizador. El valor se aplica en conjunto al botón de pago, al botón de upsell, al botón de descuento y al botón de actualización.
El deslizador se detiene en 40 px. Para un botón completamente con forma de píldora necesitas Custom CSS; consulta Personalización avanzada con CSS más abajo.
Deslizador de radio de esquinas establecido en 16 píxeles redondeando el botón de pago

​
Color de los botones

Establece el color de fondo de todos los botones del carrito, incluidos:
  • El botón de pago
  • El botón “Add to Cart” de los upsells
  • El botón “Apply” de descuentos
  • El botón de actualización a suscripción. Puedes personalizar el color de estos botones a través del Cart Editor. Para personalizaciones más avanzadas como modificaciones de CSS, consulta la sección de personalización avanzada.

​
Color del texto de los botones

Especifica el color del texto usado en todos los botones del carrito.

​
Color del texto de los botones al pasar el cursor

Controla el color del texto del botón cuando un cliente pasa el cursor sobre él con el ratón. Por ejemplo, si se establece en verde, el texto se volverá verde al pasar el cursor.

​
Mostrar botón de seguir comprando

Agrega un botón de Continue shopping al carrito, que permite a los clientes cerrar el cajón y volver a navegar sin usar el icono de cierre.

​
Personalización avanzada con CSS para los botones de pago

Para cambios de diseño significativos, puedes usar código de Custom CSS para modificar el botón de pago:
  1. En el Cart Editor, abre Settings y selecciona la pestaña Custom CSS.
  2. Utiliza el selector CSS correspondiente, como .checkout. Ejemplos de fragmentos CSS: Para crear un botón con forma de píldora:
    Para agregar un borde negro:
    Reemplaza .checkout por la clase CSS real de tu botón. Los estilos adicionales incluyen efectos hover, padding, colores de texto o fuentes.

​
Integrar la marca de Shopify para personalizar los botones

Si usas Shopify, puedes actualizar el diseño de tu botón de pago desde el administrador de Shopify:
  1. Inicia sesión en tu Shopify Admin.
  2. Ve a Settings > Checkout > Customize.
  3. Utiliza las opciones de marca para modificar la fuente, el redondeo o el color y lograr un diseño uniforme.
Vista previa del cajón del carrito de Upcart con un botón Add de upsell y el botón de pago