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

# Cómo personalizar el ancho del carrito en móviles

> Este artículo describe cómo personalizar el ancho del carrito en móviles usando css.

<div id="introduction">
  # **Introducción**
</div>

¡Bienvenido a este tutorial sobre cómo personalizar el ancho del carrito en móviles según tus preferencias! Ajustar el ancho del carrito móvil puede mejorar enormemente la experiencia de compra de tus clientes al garantizar que tu carrito sea fácil de ver e interactuar en pantallas más pequeñas. Esta personalización te permite controlar el diseño, asegurando que encaje perfectamente con el diseño general de tu tienda y que todo se vea limpio y organizado.

Estos pasos están diseñados para propietarios de tiendas o desarrolladores con conocimientos básicos de CSS. Al ajustar el ancho del carrito móvil, puedes mejorar la usabilidad y hacer que el proceso de pago sea más fluido para tus clientes, lo que potencialmente aumenta las conversiones y la satisfacción del cliente.

¡Comencemos y haz que tu carrito móvil se vea y funcione exactamente como quieres!

<div id="accessing-custom-css-settings">
  ## **Acceder a la configuración de CSS personalizado**
</div>

Para comenzar a personalizar el CSS de tu Upcart, sigue estos pasos:

1. Abre la **aplicación Upcart** dentro de tu panel de control.
2. Navega al **Cart Editor**.
3. Abre **Settings** y selecciona la pestaña **Custom CSS** (detrás de **More settings** si la fila de pestañas se desborda).

<div id="applying-custom-css">
  ## **Aplicar CSS personalizado**
</div>

Una vez que estés en la sección de Custom CSS, puedes cambiar el ancho del carrito móvil siguiendo estos pasos a continuación. Cambia el número de 90% a cualquier número que desees; cuanto mayor sea el número, más espacio ocupará el carrito en la pantalla. (nota: esto se aplica tanto a Upcart V1.0 como V2.0)

1. Localiza el área de entrada de CSS.
2. Copia y pega el siguiente código en el área de entrada de CSS:

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

<div id="conclusion">
  # **Conclusión**
</div>

Al seguir este tutorial, has personalizado con éxito el ancho del carrito móvil, haciéndolo más fácil de usar y alineado con el diseño de tu tienda. Estos pequeños cambios pueden tener un gran impacto en la experiencia de compra de tus clientes, facilitándoles navegar y comprar desde dispositivos móviles.

<div id="still-need-help">
  ## ¿Todavía necesitas ayuda?
</div>

Si necesitas ayuda con las personalizaciones, te recomendamos consultar con un Shopify Expert sobre cómo añadir HTML, CSS e incluso JavaScript al cajón de tu carrito.

[Ver Shopify Experts](https://www.shopify.com/partners/directory)