> ## 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.
# Bloc Empty cart
> Le bloc Empty cart — le contenu affiché lorsqu'un acheteur n'a aucun article.
> Le bloc **Empty cart** est le contenu affiché lorsque le panier ne contient aucun article, généralement un message et un bouton pour continuer les achats, afin qu'un tiroir vide reste utile et fidèle à votre marque. Il n'apparaît que dans l'**état vide** du panier ; d'autres blocs (comme le Header) peuvent l'accompagner dans ce même état.
## Comportement
* Le bloc n'apparaît que lorsque le panier est vide. Dès qu'un acheteur ajoute un article, le panier bascule vers son état rempli et ce bloc est remplacé par votre mise en page de panier rempli.
* Dans l'éditeur, le lien du CTA est inactif afin qu'un clic ne vous fasse pas quitter la page pendant la conception.
## Paramètres
| Paramètre | Ce qu'il contrôle | Défaut |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text** | Le message d'état vide. Texte enrichi. | `Your cart is empty.` |
| **Button text** | Le libellé du bouton. Prend en charge le formatage HTML en ligne. | `Continue shopping` |
| **Button link** | La destination du bouton. | `/collections/all` |
| **Background color** | La couleur de fond du bloc. Vide la laisse transparente, de sorte que le fond du panier reste visible. | `transparent` |
| **Alignment** | L'alignement du texte et du bouton du bloc : **Left** ou **Center**. | Center |
| **Fit to height** | Si le bloc remplit la hauteur restante du corps du panier et se centre verticalement, ou reste à la hauteur de son contenu : **Fill remaining height** ou **Fit content**. | Fill remaining height |
## Placement et limites
* **Région :** corps.
* **Maximum :** 1 par état de panier.
* **État :** panier vide uniquement. Ce bloc n'apparaît pas dans l'état rempli. Les nouveaux paniers incluent également un Header dans l'état vide par défaut ; consultez [Comment fonctionnent les paniers ?](/fr/aftersell/cart/how-carts-work).
* Ajouté aux nouveaux paniers par défaut. Non verrouillé — vous pouvez le supprimer ou le masquer.
## Modèle personnalisé
Prend en charge un [modèle personnalisé](/fr/aftersell/cart/custom-templates) depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu'il reçoit.
| Prop | Type | À quoi elle sert |
| --------- | -------- | -------------------------------------------------------------------------------------------------------- |
| `text` | `string` | Le message de panier vide sous forme de HTML assaini. |
| `cta` | `string` | Libellé du bouton d'appel à l'action, en texte brut. |
| `ctaHtml` | `string` | Libellé du bouton d'appel à l'action sous forme de HTML assaini — ce que le balisage par défaut affiche. |
| `href` | `string` | La destination de l'appel à l'action. |
Ce bloc ne s'affiche que lorsque le panier est vide, il n'y a donc pas d'objet cart dans les props. Affichez `href` sous forme de véritable `` plutôt que via une navigation scriptée, et `text` avec `dangerouslySetInnerHTML`, puisqu'il s'agit de HTML déjà assaini.
## Design
Stylisez ce bloc avec sa section **Design** dans le panneau de paramètres. Il s'agit de surcharges par bloc qui se superposent à votre design global et y reviennent lorsqu'elles sont vides.
### Text
La section **Text** dans Design vous permet de contrôler la typographie de deux éléments. Utilisez le sélecteur **Text element** pour basculer entre eux.
**Message** — le texte du message d'état vide. Le gras et la couleur du texte se règlent dans l'éditeur de texte enrichi ci-dessus (dans l'onglet Settings), pas ici.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | -------------------------------------- | ---------------- |
| **Font** | La famille de police du message. | Héritée du thème |
| **Size** | La taille de la police. | `18px` |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.3` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
**Button label** — le texte du bouton continuer les achats. La couleur du texte se règle dans la section Button de Design.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | ------------------------------------------------------------------- | -------------- |
| **Size** | La taille de la police. | `15px` |
| **Weight** | La graisse de la police — Light, Regular, Medium, Semibold ou Bold. | Semibold (600) |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.47` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
### Bouton
La section **Button** vous permet de styliser le bouton CTA indépendamment du design global des boutons. Utilisez le sélecteur **Default / Hover** pour basculer entre les deux états.
| Paramètre | État | Ce qu'il contrôle |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| **Background color** | Default | Le remplissage du bouton dans son état de repos. Retombe sur la couleur de fond globale des boutons. |
| **Text color** | Default | La couleur du libellé du bouton dans son état de repos. Retombe sur la couleur de texte globale des boutons. |
| **Background color** | Hover | Le remplissage du bouton lorsqu'un client le survole. Retombe sur la couleur de fond par défaut. |
| **Text color** | Hover | La couleur du libellé du bouton au survol. Retombe sur la couleur de texte par défaut. |
| **Border color** | — | La couleur de bordure du bouton (les deux états). Retombe sur la couleur de bordure globale des boutons. |
| **Border radius** | — | L'arrondi des coins du bouton. Retombe sur le rayon de bordure global des boutons. |
Que sont les paramètres de design ? Apprenez-en plus ici : [Paramètres de design](/fr/aftersell/cart/design-settings).