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

# Paramètres de design

> Paramètres de design globaux et par bloc pour le panier Aftersell : couleurs, boutons, mise en page, et comment les surcharges par bloc se superposent.

Le design du panier Aftersell fonctionne à deux niveaux : des paramètres **globaux** qui stylisent l'ensemble du panier, et des **surcharges par bloc** qui affinent un bloc individuel.

<div id="global-design-settings">
  ## Paramètres de design globaux
</div>

Ouvrez **Cart settings** depuis la barre latérale de l'éditeur pour accéder au design global du panier. Les paramètres sont regroupés en Design, Buttons et Layout.

<div id="design">
  ### Design
</div>

| Paramètre                | Ce qu'il contrôle                                                      | Défaut    |
| ------------------------ | ---------------------------------------------------------------------- | --------- |
| **Background color**     | L'arrière-plan du panier.                                              | `#ffffff` |
| **Text color**           | Le texte principal.                                                    | `#000000` |
| **Secondary text color** | Le texte atténué / secondaire.                                         | `#a8a8a8` |
| **Accent color**         | Les badges, séparateurs et prix barrés.                                | `#f2f2f2` |
| **Border radius**        | L'arrondi des coins des conteneurs, cartes, images et champs de texte. | `8px`     |

<div id="buttons">
  ### Buttons
</div>

| Paramètre            | Ce qu'il contrôle                                                           | Défaut    |
| -------------------- | --------------------------------------------------------------------------- | --------- |
| **Background color** | Le remplissage des boutons.                                                 | `#000000` |
| **Text color**       | Le libellé des boutons.                                                     | `#ffffff` |
| **Border color**     | La bordure des boutons.                                                     | `#000000` |
| **Border radius**    | L'arrondi des coins des boutons, menus déroulants et contrôles de quantité. | `8px`     |

<div id="layout">
  ### Layout
</div>

| Paramètre              | Ce qu'il contrôle                                    | Défaut  |
| ---------------------- | ---------------------------------------------------- | ------- |
| **Horizontal padding** | Le padding gauche/droite à l'intérieur du panier.    | `24px`  |
| **Desktop width**      | La largeur du tiroir sur ordinateur (minimum 320px). | `440px` |

<div id="per-block-design-overrides">
  ## Surcharges de design par bloc
</div>

Chaque bloc, à l'exception de [**Custom code**](/fr/aftersell/cart/custom-code-blocks), possède ses propres surcharges de design par bloc en bas de son panneau de paramètres. Elles sont regroupées sous l'intitulé **Design** dans tous les blocs sauf **Express payments**, dont les surcharges se trouvent dans des sections Style et Spacing sans intitulé. (Custom code n'a aucun panneau de paramètres : le bloc *est* le code, il n'affiche donc qu'un onglet Code.) Elles contrôlent des éléments comme le style, l'espacement et d'autres paramètres de design propres au bloc. Ces **paramètres de design par bloc**, lorsqu'ils sont vides, reviennent au paramètre global pour cette propriété.

De nombreux blocs incluent également une section **Text** dans leur panneau Design, où vous pouvez définir la typographie d'éléments de texte spécifiques à ce bloc — famille de police, taille, hauteur de ligne et espacement des lettres. Les blocs comportant plusieurs éléments de texte (comme Notes et Empty cart) affichent un sélecteur **Text element** pour vous permettre de styliser chacun d'eux indépendamment.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Aperçu animé du panneau des paramètres de design par bloc dans l'éditeur de panier" title="Aperçu animé du panneau des paramètres de design par bloc dans l'éditeur de panier" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Polices et position du tiroir
</div>

* **Polices :** le panier hérite de la **police de votre thème** par défaut. Vous pouvez définir une famille de police personnalisée pour certains éléments de texte (comme le titre du produit et le titre des upsells) depuis la section **Text** des paramètres Design de chaque bloc — consultez [Bloc Cart items](/fr/aftersell/cart/cart-items-block) et [Bloc Upsells](/fr/aftersell/cart/upsells-block) pour plus de détails.
* **Position du tiroir :** la **largeur** du tiroir est réglable (Desktop width, ci-dessus) ; il n'y a pas de paramètre de position gauche/droite.

<div id="behavior-settings">
  ## Paramètres de comportement
</div>

Au-delà du style, **Cart settings** contient aussi des options de comportement — l'ouverture du tiroir à l'ajout au panier, et les sélecteurs de thème qui maintiennent votre boutique synchronisée. Consultez [Paramètres du panier](/fr/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Quand utiliser plutôt du CSS personnalisé
</div>

Les paramètres intégrés couvrent les cas courants. Pour tout ce qui va au-delà — cibler un élément spécifique, un espacement personnalisé, des ajustements responsives — utilisez [Custom CSS](/fr/aftersell/cart/custom-css).