Skip to main content
⚠️ 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 également rétablir votre panier en Version 1 au lieu d’utiliser la Version 2. Nous travaillons actuellement sur de nouveaux modèles de personnalisation pour la Version 2 des modules, et ils seront bientôt disponibles.

​
Aperçu

Si vos images de produits semblent étirées, écrasées ou coupées dans Upcart, cela est généralement causé par un conflit de style de thème. Certains thèmes Shopify appliquent un style d’image global qui affecte l’affichage des images de produits dans Upcart. Vous pouvez corriger ce problème en ajoutant une courte personnalisation CSS directement dans les paramètres de l’éditeur Upcart.

​
Comment le corriger

Suivez ces étapes pour appliquer une personnalisation CSS qui préserve les proportions de vos images de produits.

​
Accéder aux paramètres Custom CSS

  1. Ouvrez l’application Upcart depuis votre tableau de bord Shopify.
  2. Naviguez vers le Cart Editor.
  3. Ouvrez Settings et sélectionnez l’onglet Custom CSS. Settings est une rangée d’onglets — si vous ne voyez pas Custom CSS, il se trouve derrière More settings.

​
Ajouter le CSS

  1. Copiez et collez l’extrait CSS suivant dans le champ Custom CSS :
  1. Enregistrez vos modifications.
  2. Actualisez votre boutique et ouvrez Upcart pour confirmer que les images s’affichent maintenant correctement.

​
Pourquoi cela se produit

Certains thèmes Shopify appliquent des règles CSS globales qui redimensionnent ou recadrent les images d’une manière qui affecte leur apparence dans les applications tierces comme Upcart. Ces règles peuvent remplacer le style par défaut d’Upcart et déformer les proportions des images. L’extrait CSS ci-dessus garantit que les images de produits conservent leur rapport hauteur/largeur d’origine et s’affichent correctement sur les appareils de bureau et mobiles.