⚠️ Aviso importante Esta personalización solo funciona con la Versión 1 de los módulos del carrito de Upcart. Si actualizaste recientemente tu carrito a la Versión 2, es posible que estas personalizaciones no funcionen. Deberás usar los nuevos selectores proporcionados para la Versión 2 en la guía de migración. Si tus personalizaciones no funcionan como esperas, puedes revertir el carrito a la Versión 1 tú mismo: en el Cart Editor, usa el menú desplegable Cart version en la parte superior del menú izquierdo y elige V1.0 (Legacy). El menú desplegable aparece una vez que todos los módulos del carrito están en V2. Actualmente estamos trabajando en nuevas plantillas de personalización para la Versión 2 de los módulos, y estarán disponibles pronto.

Introducción

Bienvenido a este tutorial de CSS, donde te mostraremos cómo establecer el ancho de tu carrito móvil en cero a menos que Upcart lo active. Es una forma práctica de mantener tu carrito oculto y agilizar la experiencia de compra en móviles hasta que tus clientes estén listos para verlo. Esta guía está diseñada para propietarios de tiendas o desarrolladores con conocimientos básicos de CSS. Al usar esta personalización, puedes mantener tu carrito fuera de la vista y mejorar el diseño de la página, reduciendo distracciones y ayudando a tus clientes a concentrarse en comprar. Es un pequeño ajuste que puede marcar una gran diferencia en la experiencia móvil de tu tienda. ¡Comencemos y hagamos que tu carrito móvil trabaje de forma más inteligente, no más difícil!

Acceso a los ajustes de CSS personalizado

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

Abre la Upcart App dentro de tu panel.
Ve al Cart Editor.
Abre Settings y selecciona la pestaña Custom CSS (detrás de More settings si la fila de pestañas se desborda).
A continuación, copia y pega el código en el área de entrada de CSS
Cuando termines, “haz clic en Save” y actualiza la página de tu tienda para ver los resultados en vivo.

Aquí está el código CSS para copiar y pegar en la sección de CSS:

@media (max-width: 440px) {  
    .upcartPopupShow [class*="styles_CartPreview__right__"] {  
        width: 100%;  
        max-width: 440px;  
    }  
  
    [class*="styles_CartPreview__right__"] {  
        width: 0px;  
	max-width: 440px;  
    }  
}

Conclusión

¡Y eso es todo! Ya aprendiste cómo cambiar el ancho de tu carrito móvil a cero hasta que Upcart lo active, creando una experiencia de compra más limpia y enfocada.

🚧 Soporte para personalizaciones

El equipo de soporte de Upcart no puede ayudar con la implementación de soluciones personalizadas de CSS o HTML en tu carrito. Si necesitas ayuda para diseñar o dar estilo a algo personalizado, te recomendamos consultar a un Shopify Expert: Ver Shopify Experts

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Establece el ancho del carrito móvil en cero hasta que Upcart lo active con CSS

Introducción

Acceso a los ajustes de CSS personalizado

Aquí está el código CSS para copiar y pegar en la sección de CSS:

Conclusión

🚧 Soporte para personalizaciones

​Introducción

​Acceso a los ajustes de CSS personalizado

​Aquí está el código CSS para copiar y pegar en la sección de CSS:

​Conclusión

​🚧 Soporte para personalizaciones

Introducción

Acceso a los ajustes de CSS personalizado

Aquí está el código CSS para copiar y pegar en la sección de CSS:

Conclusión

🚧 Soporte para personalizaciones