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.

​
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.

​
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.

​
🚧 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. Por ejemplo:
  • 0 píxeles crea botones cuadrados
  • Valores más altos crean botones más redondeados o con forma de píldora. Por ejemplo, establecer un valor de radio de 0 crea esquinas rectas y cuadradas, mientras que aumentar el radio a 9999px da como resultado botones con forma de píldora.

​
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.

​
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.