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

# CSS personalizado

> Escribe CSS para personalizar el diseño del cajón de tu carrito.

<div id="overview">
  # Descripción general
</div>

Esta sección te permite cambiar la apariencia de los elementos existentes del carrito o aplicar estilos al HTML personalizado agregado a través del editor.

<div id="where-to-find-it">
  ## **Dónde encontrarlo**
</div>

Ve a:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings es una fila de pestañas; Custom CSS es una de ellas, junto a Custom HTML. Si no está visible, se encuentra detrás de **More settings**.

<div id="how-it-works">
  ## **Cómo funciona**
</div>

Puedes agregar CSS para:

* Dar estilo a los elementos predeterminados del carrito
* Modificar la apariencia del HTML personalizado
* Ajustar espaciado, alineación, tipografía y más

A medida que escribes, un **popup de autocompletado** sugerirá selectores válidos de Upcart para ayudarte a editar más rápido. Al seleccionar una sugerencia, la regla se autocompleta y te ayuda a estructurar tu código. Si los cambios no aparecen como esperas, revisa las sugerencias comunes de solución de problemas, como actualizar las cachés tanto en el navegador como en el editor de Upcart, comprobar la ubicación del CSS y asegurar la especificidad adecuada en tus reglas CSS.

<div id="using-selectors">
  ## **Uso de selectores**
</div>

Upcart ofrece una amplia gama de selectores personalizados. Haz clic en **"Show list"** para ver todas las opciones disponibles. Evita usar selectores globales como `body`, `div` o `h3` a menos que estén acotados con `.upcart-cart`, para evitar cambios no intencionados en tu tienda. Para situaciones donde los estilos no se aplican correctamente, considera aumentar la especificidad del CSS o agregar `!important` a tus reglas CSS. Hacerlo garantiza que anulen cualquier estilo en conflicto. Ejemplo:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

Ejemplo (selector seguro):

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **Ejemplo: Dar estilo a un mensaje de agradecimiento**
</div>

Supongamos que agregaste este HTML personalizado debajo del botón de pago:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

Sin CSS, el mensaje se verá sencillo. Para darle estilo:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # Problemas comunes y soluciones
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## El CSS no aparece en dispositivos móviles
</div>

Si tu texto o estilos personalizados no son visibles en móvil:

* Actualiza la página tanto en el **Upcart Editor** como en tu navegador móvil para limpiar las versiones en caché.
* Asegúrate de que la última versión publicada del carrito esté activa.
* Confirma que el CSS esté guardado en la pestaña **Custom CSS** en **Upcart > Cart Editor > Settings**.

<div id="discrepancies-between-editor-and-live-store">
  ## Discrepancias entre el editor y la tienda en vivo
</div>

Si los estilos se muestran correctamente en el editor pero no en el sitio en vivo, puede que necesiten mayor especificidad de selector o que se agregue `!important` a las reglas clave.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## Uso incorrecto de selectores CSS
</div>

Verifica que se esté apuntando a la clase o al ID correctos. Incluye siempre prefijos como `.upcart-` para los elementos específicos de Upcart, a fin de evitar resultados no deseados. Si el estilo no se aplica como esperas, asegúrate de que el selector `.thank-you-message` apunte con precisión al elemento HTML deseado y comprueba que el código CSS esté colocado en la pestaña correcta (Upcart > Cart Editor > Settings > Custom CSS).

***

Soporte para personalizaciones:

El soporte de Upcart no puede ayudar a implementar o depurar CSS personalizado. Para ayuda avanzada con estilos, recomendamos trabajar con un Shopify Expert. Para solucionar problemas de CSS personalizado, consulta la sección de problemas comunes para obtener orientación sobre cómo resolver cuestiones como estilos que faltan en dispositivos móviles, discrepancias entre las vistas previas del editor y la tienda en vivo, y la ubicación incorrecta de selectores.