Skip to main content

​
Aperçu

Cette section vous permet de modifier l’apparence des éléments de panier existants ou d’appliquer des styles au HTML personnalisé ajouté via l’éditeur.

​
Où le trouver

Allez dans :
Upcart > Cart Editor > Settings > Custom CSS
Settings est une rangée d’onglets ; Custom CSS en fait partie, aux côtés de Custom HTML. S’il n’est pas visible, il se trouve derrière More settings.

​
Comment ça fonctionne

Vous pouvez ajouter du CSS pour :
  • Styliser les éléments de panier par défaut
  • Modifier l’apparence du HTML personnalisé
  • Ajuster les espacements, l’alignement, la typographie, et plus encore
Pendant que vous tapez, une fenêtre de saisie automatique vous suggérera des sélecteurs Upcart valides pour accélérer l’édition. La sélection d’une suggestion complétera automatiquement la règle et vous aidera à structurer votre code. Si les modifications n’apparaissent pas comme prévu, passez en revue les suggestions courantes de dépannage, comme l’actualisation des caches dans le navigateur et dans l’éditeur Upcart, la vérification de l’emplacement du CSS et une spécificité adéquate dans vos règles CSS.

​
Utiliser les sélecteurs

Upcart fournit un large éventail de sélecteurs personnalisés. Cliquez sur « Show list » pour voir toutes les options disponibles. Évitez d’utiliser des sélecteurs globaux comme body, div ou h3 sauf s’ils sont limités avec .upcart-cart, afin d’éviter des changements involontaires sur votre boutique. Si les styles ne s’appliquent pas correctement, envisagez d’augmenter la spécificité CSS ou d’ajouter !important à vos règles CSS. Cela garantit qu’elles remplaceront tout style en conflit. Exemple :
Exemple (sélecteur sûr) :

​
Exemple : mise en forme d’un message de remerciement

Supposons que vous ayez ajouté ce HTML personnalisé sous le bouton de paiement :
Sans CSS, le message aura un aspect brut. Pour le styliser :

​
Problèmes courants et solutions

​
Le CSS n’apparaît pas sur les appareils mobiles

Si votre texte personnalisé ou vos styles ne sont pas visibles sur mobile :
  • Actualisez la page à la fois dans Upcart Editor et dans votre navigateur mobile pour effacer les versions mises en cache.
  • Assurez-vous que la dernière version publiée du panier est active.
  • Confirmez que le CSS est enregistré dans l’onglet Custom CSS de Upcart > Cart Editor > Settings.

​
Différences entre l’éditeur et la boutique en ligne

Les styles qui s’affichent correctement dans l’éditeur mais pas sur le site en ligne peuvent nécessiter une spécificité de sélecteur accrue ou l’ajout de !important aux règles clés.

​
Utilisation incorrecte des sélecteurs CSS

Vérifiez que la bonne classe ou le bon ID est ciblé. Incluez toujours des préfixes comme .upcart- pour les éléments propres à Upcart afin d’éviter des résultats inattendus. Si le style ne s’applique pas comme prévu, assurez-vous que le sélecteur .thank-you-message cible précisément l’élément HTML voulu et vérifiez que le code CSS est placé dans le bon onglet (Upcart > Cart Editor > Settings > Custom CSS).
Assistance pour les personnalisations : L’assistance Upcart ne peut pas vous aider à mettre en œuvre ou déboguer du CSS personnalisé. Pour une aide avancée en matière de style, nous vous recommandons de travailler avec un expert Shopify. Pour dépanner le CSS personnalisé, reportez-vous à la section des problèmes courants pour obtenir des conseils sur la résolution de problèmes tels que les styles manquants sur les appareils mobiles, les différences entre les aperçus de l’éditeur et la boutique en ligne, et le mauvais placement des sélecteurs.