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

# CSS personnalisé

> Écrivez du CSS pour personnaliser le design de votre tiroir de panier.

<div id="overview">
  # Aperçu
</div>

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.

<div id="where-to-find-it">
  ## **Où le trouver**
</div>

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

<div id="how-it-works">
  ## **Comment ça fonctionne**
</div>

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.

<div id="using-selectors">
  ## **Utiliser les sélecteurs**
</div>

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 :

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

Exemple (sélecteur sûr) :

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **Exemple : mise en forme d'un message de remerciement**
</div>

Supposons que vous ayez ajouté ce HTML personnalisé sous le bouton de paiement :

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

Sans CSS, le message aura un aspect brut. Pour le styliser :

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # Problèmes courants et solutions
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## Le CSS n'apparaît pas sur les appareils mobiles
</div>

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

<div id="discrepancies-between-editor-and-live-store">
  ## Différences entre l'éditeur et la boutique en ligne
</div>

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.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## Utilisation incorrecte des sélecteurs CSS
</div>

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.