⚠️ 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. 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.

Introduction

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 !

Accéder aux paramètres de CSS personnalisé

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

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

Voici le code CSS à copier et coller dans la section CSS :

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

Conclusion

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.

🚧 Support pour les personnalisations

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

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

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

Introduction

Accéder aux paramètres de CSS personnalisé

Voici le code CSS à copier et coller dans la section CSS :

Conclusion

🚧 Support pour les personnalisations

​Introduction

​Accéder aux paramètres de CSS personnalisé

​Voici le code CSS à copier et coller dans la section CSS :

​Conclusion

​🚧 Support pour les personnalisations

Introduction

Accéder aux paramètres de CSS personnalisé

Voici le code CSS à copier et coller dans la section CSS :

Conclusion

🚧 Support pour les personnalisations