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

# Définir la largeur du panier mobile à zéro jusqu'à son déclenchement par Upcart avec du CSS

> Découvrez comment définir la largeur de votre panier mobile à zéro sauf lorsqu'il est déclenché par Upcart à l'aide de CSS, pour une expérience d'achat plus épurée et fluide.

⚠️ **Avis important**

Cette personnalisation ne fonctionne qu'avec la version 1 des modules de panier Upcart. Si vous avez récemment mis à niveau votre panier vers la version 2, ces personnalisations peuvent ne pas fonctionner. Vous devrez utiliser les nouveaux sélecteurs fournis pour la version 2 dans le [guide de migration.](/fr/upcart/upcart_v20_migration_guide)

Si vos personnalisations ne fonctionnent pas comme prévu, vous pouvez revenir vous-même à la version 1 du panier : dans le Cart Editor, utilisez le menu déroulant **Cart version** en haut du menu de gauche et choisissez **V1.0 (Legacy)**. Le menu déroulant apparaît une fois que chaque module du panier est en V2.

Nous travaillons actuellement sur de nouveaux modèles de personnalisation pour la version 2 des modules, et ils seront bientôt disponibles.

<div id="introduction">
  # **Introduction**
</div>

Bienvenue dans ce tutoriel CSS, où nous vous montrerons comment définir la largeur de votre panier mobile à zéro sauf lorsqu'il est déclenché par Upcart. C'est un moyen pratique de garder votre panier masqué et de fluidifier l'expérience d'achat mobile jusqu'à ce que vos clients soient prêts à le consulter.

Ce guide est conçu pour les propriétaires de boutiques ou les développeurs ayant des connaissances de base en CSS. En utilisant cette personnalisation, vous pouvez garder votre panier hors de vue et améliorer la mise en page, réduisant les distractions et aidant vos clients à se concentrer sur leurs achats. C'est un petit ajustement qui peut faire une grande différence dans l'expérience mobile de votre boutique.

Commençons et faisons travailler votre panier mobile plus intelligemment, pas plus durement !

<div id="accessing-custom-css-settings">
  ## **Accéder aux paramètres de CSS personnalisé**
</div>

Pour commencer à personnaliser le CSS de votre Upcart, suivez ces étapes :

1. Ouvrez l'**application Upcart** depuis votre tableau de bord.
2. Accédez au **Cart Editor**.
3. Ouvrez **Settings** et sélectionnez l'onglet **Custom CSS** (derrière **More settings** si la rangée d'onglets déborde).
4. Ensuite, copiez et collez le code dans la zone de saisie CSS
5. Quand vous avez terminé, cliquez sur « Save » et actualisez la page de votre boutique pour voir les résultats en direct.

<div id="here-is-the-css-code-to-copy-and-paste-into-the-css-section">
  ## Voici le code CSS à copier et coller dans la section CSS :
</div>

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

<div id="conclusion">
  # **Conclusion**
</div>

Et voilà ! Vous savez maintenant comment définir la largeur de votre panier mobile à zéro jusqu'à ce qu'il soit déclenché par Upcart, créant ainsi une expérience d'achat plus épurée et ciblée.

<div id="support-for-customizations">
  ## 🚧 Support pour les personnalisations
</div>

L'équipe de support d'Upcart ne peut pas vous aider à implémenter des solutions CSS ou HTML personnalisées dans votre panier.

Si vous avez besoin d'aide pour concevoir ou styliser quelque chose de personnalisé, nous vous recommandons de consulter un Shopify Expert :

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