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

# Configuraciones de diseño

> Configuraciones de diseño globales y por bloque para el Aftersell Cart: colores, botones, layout y cómo las anulaciones de bloque se aplican encima.

El diseño del Aftersell Cart funciona en dos niveles: configuraciones **globales** que dan estilo a todo el carrito, y anulaciones **por bloque** que ajustan un bloque individual.

<div id="global-design-settings">
  ## Configuraciones de diseño globales
</div>

Abre **Cart settings** desde la barra lateral del editor para llegar al diseño global del carrito. Las configuraciones se agrupan en Design, Buttons y Layout.

<div id="design">
  ### Design
</div>

| Configuración            | Qué controla                                                                  | Predeterminado |
| ------------------------ | ----------------------------------------------------------------------------- | -------------- |
| **Background color**     | El fondo del carrito.                                                         | `#ffffff`      |
| **Text color**           | Texto principal.                                                              | `#000000`      |
| **Secondary text color** | Texto atenuado / secundario.                                                  | `#a8a8a8`      |
| **Accent color**         | Insignias, divisores y precios tachados.                                      | `#f2f2f2`      |
| **Border radius**        | Redondeo de esquinas para contenedores, tarjetas, imágenes y campos de texto. | `8px`          |

<div id="buttons">
  ### Buttons
</div>

| Configuración        | Qué controla                                                                   | Predeterminado |
| -------------------- | ------------------------------------------------------------------------------ | -------------- |
| **Background color** | Relleno del botón.                                                             | `#000000`      |
| **Text color**       | Etiqueta del botón.                                                            | `#ffffff`      |
| **Border color**     | Borde del botón.                                                               | `#000000`      |
| **Border radius**    | Redondeo de esquinas para botones, menús desplegables y controles de cantidad. | `8px`          |

<div id="layout">
  ### Layout
</div>

| Configuración          | Qué controla                                      | Predeterminado |
| ---------------------- | ------------------------------------------------- | -------------- |
| **Horizontal padding** | Padding izquierdo/derecho dentro del carrito.     | `24px`         |
| **Desktop width**      | El ancho del drawer en escritorio (mínimo 320px). | `440px`        |

<div id="per-block-design-overrides">
  ## Anulaciones de diseño por bloque
</div>

Cada bloque, excepto [**Custom code**](/es/aftersell/cart/custom-code-blocks), tiene sus propias anulaciones de diseño por bloque en la parte inferior de su panel de configuración. Llevan el encabezado **Design** en todos los bloques salvo en **Express payments**, cuyas anulaciones están en secciones de Style y Spacing sin etiqueta. (Custom code no tiene panel de configuración: el bloque *es* el código, así que solo muestra una pestaña Code.) Controlan cosas como el estilo, el espaciado y otras configuraciones de diseño específicas del bloque. Estas **configuraciones de diseño por bloque**, cuando están en blanco, recurren a la configuración global de esa propiedad.

Muchos bloques también incluyen una sección **Text** dentro de su panel de Design, donde puedes establecer la tipografía de elementos de texto específicos de ese bloque — familia tipográfica, tamaño, altura de línea y espaciado entre caracteres. Los bloques con múltiples elementos de texto (como Notes y Empty cart) muestran un selector **Text element** para que puedas dar estilo a cada uno de forma independiente.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Vista previa animada del panel de configuraciones de Design por bloque en el editor del carrito" title="Vista previa animada del panel de configuraciones de Design por bloque en el editor del carrito" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Fuentes y posición del drawer
</div>

* **Fuentes:** el carrito hereda la **fuente de tu tema** de forma predeterminada. Puedes establecer una familia de fuentes personalizada para determinados elementos de texto (como el título del producto y el encabezado de upsells) desde la sección **Text** en la configuración de Design de cada bloque — consulta [Bloque Cart items](/es/aftersell/cart/cart-items-block) y [Bloque Upsells](/es/aftersell/cart/upsells-block) para más detalles.
* **Posición del drawer:** el **ancho** del drawer es ajustable (Desktop width, arriba); no hay configuración de posición izquierda/derecha.

<div id="behavior-settings">
  ## Configuraciones de comportamiento
</div>

Más allá de los estilos, **Cart settings** también contiene opciones de comportamiento — abrir el drawer al agregar al carrito, y los selectores de tema que mantienen tu tienda sincronizada. Consulta [Cart settings](/es/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Cuándo usar CSS personalizado en su lugar
</div>

Las configuraciones integradas cubren los casos comunes. Para cualquier cosa más allá de ellas — apuntar a un elemento específico, espaciado personalizado, ajustes responsivos — usa [Custom CSS](/es/aftersell/cart/custom-css).