> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Módulo Design
> Este artículo explica cómo personalizar la configuración de diseño de tu Upcart.
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](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) 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](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) 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:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Para agregar un borde negro:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
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.
