> ## 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.
# Module Design
> Cet article explique comment personnaliser vos paramètres de design Upcart.
Le module Design vous permet de personnaliser l'apparence de votre panier, y compris la mise en page, les couleurs de marque et les styles de boutons.
# Général
## Hériter des polices du thème
Ce paramètre permet à Upcart d'utiliser les polices définies dans les paramètres de votre thème Shopify. Pour voir vos choix de polices actuels, ouvrez l'[éditeur de thème Shopify](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) et accédez à la section Typography.
## **🚧 Aperçu du panier 🚧**
Les polices héritées de votre thème n'apparaîtront pas dans la fenêtre d'aperçu d'Upcart, mais elles s'afficheront correctement sur votre boutique en ligne.
## Afficher les prix barrés
Activez ce paramètre pour afficher un prix barré (également connu sous le nom de [Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) à côté de chaque article dans le panier. Cela reflète les prix remisés, comme sur vos pages produit.
***
# Couleurs
## Couleur d'arrière-plan
Définit la couleur d'arrière-plan principale du panier, à l'exclusion du pied de page et des cartes d'upsell.
## Couleur d'accent du panier
Contrôle la couleur d'arrière-plan du pied de page du panier et des cartes d'articles d'upsell.
## Couleur du texte du panier
Définit la couleur de tout le texte du panier, à l'exception du texte des boutons et du texte d'économies, qui sont contrôlés séparément.
## Couleur du texte d'économies
Définit la couleur du texte d'économies affiché sous le prix du produit.
## 🚧 **Aperçu du panier** 🚧
L'éditeur d'aperçu peut ne pas refléter précisément le style final. Le thème de votre boutique peut inclure du CSS personnalisé qui affecte la taille ou la couleur du texte. Vérifiez toujours les modifications sur votre boutique en ligne.
***
# Paramètres des boutons
Upcart propose des options avancées de style des boutons, y compris une personnalisation spécifique pour le bouton de paiement. Cela inclut des méthodes d'ajustement CSS et l'intégration des outils de personnalisation de marque de Shopify.
## Rayon des coins
Ajuste l'arrondi des coins des boutons. Par exemple :
* 0 pixel crée des boutons carrés
* Des valeurs plus élevées créent des boutons plus arrondis ou en forme de pilule. Par exemple, une valeur de rayon de `0` crée des coins nets et carrés, tandis qu'un rayon augmenté à `9999px` donne des boutons en forme de pilule.
## Couleur des boutons
Définit la couleur d'arrière-plan de tous les boutons du panier, y compris :
* Le bouton de paiement
* Le bouton « Add to Cart » d'upsell
* Le bouton « Apply » de remise
* Le bouton de passage à l'abonnement. Vous pouvez personnaliser la couleur de ces boutons via le Cart Editor. Pour des personnalisations plus avancées comme les modifications CSS, reportez-vous à la section de personnalisation avancée.
## Couleur du texte des boutons
Spécifie la couleur du texte utilisée dans tous les boutons du panier.
## Couleur du texte des boutons au survol
Contrôle la couleur du texte des boutons lorsqu'un client le survole avec sa souris. Par exemple, si elle est définie sur vert, le texte deviendra vert au survol.
# Personnalisation CSS avancée des boutons de paiement
Pour des changements de design importants, vous pouvez utiliser du code Custom CSS pour modifier le bouton de paiement :
1. Dans le Cart Editor, ouvrez **Settings** et sélectionnez l'onglet **Custom CSS**.
2. Utilisez le sélecteur CSS pertinent, comme `.checkout`. Exemples d'extraits CSS : pour créer un bouton en forme de pilule :
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Pour ajouter une bordure noire :
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
Remplacez `.checkout` par la classe CSS réelle de votre bouton. Les styles supplémentaires incluent les effets au survol, le remplissage, les couleurs de texte ou les polices.
# Intégrer la personnalisation de marque de Shopify pour les boutons
Si vous utilisez Shopify, vous pouvez mettre à jour le design de votre bouton de paiement via l'interface d'administration Shopify :
1. Connectez-vous à votre interface d'administration Shopify.
2. Accédez à `Settings > Checkout > Customize`.
3. Utilisez les options de personnalisation de marque pour modifier la police, l'arrondi ou la couleur afin d'obtenir un design harmonieux.
