> ## 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 Header > Le bloc Header du panier Aftersell : le titre, le nombre d'articles, le logo et le contrôle de fermeture épinglés en haut du tiroir. > Le bloc **Header** est la zone supérieure épinglée du tiroir de panier, donnant au tiroir un titre clair et un moyen évident de le fermer. Vous contrôlez sa mise en page en attribuant **Title**, **Logo** et **Close button** aux sections gauche et droite. Comme le Header est épinglé en haut, il reste visible pendant que le reste du panier défile. Bloc Header avec le titre du panier, le nombre d'articles et le contrôle de fermeture en haut du tiroir
## Comportement
* Le Header est épinglé en haut du tiroir et ne défile pas avec le corps du panier. * Le contrôle de fermeture est toujours disponible et ferme le tiroir.
## Paramètres
| Paramètre | Ce qu'il contrôle | Défaut | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | | **Left** | Quels éléments sont affichés dans la section gauche (`Title`, `Logo`, `Close button`) et dans quel ordre. | `Title` | | **Right** | Quels éléments sont affichés dans la section droite (`Title`, `Logo`, `Close button`) et dans quel ordre. | `Close button` | | **Title** | Titre en texte enrichi pour le panier. Prend en charge les jetons `{{cart_item_count}}` et `{{total_price}}`. | `Cart • {{cart_item_count}}` | | **Image** | Une image exposée à un modèle personnalisé sous `props.logoUrl`. Ce champ n'apparaît que lorsqu'un modèle personnalisé est actif, et l'en-tête intégré ne l'affiche jamais. Formats pris en charge : WebP, JPEG, PNG, GIF, SVG. | Aucun | Le titre est traduisible. Si votre titre se résout en une valeur vide (par exemple, une traduction non définie), le panier affiche par défaut **Cart** afin que l'en-tête ne soit jamais vide. Les éléments apparaissent dans l'ordre dans lequel vous les sélectionnez, de gauche à droite, et chaque élément ne peut être attribué qu'à une seule section à la fois.
## Placement et limites
* **Région :** haut uniquement. * **Maximum :** 1 par état de panier. * **État :** panier rempli et vide (chaque état a sa propre instance de Header). * Ajouté aux nouveaux paniers par défaut dans les deux états. Non verrouillé, vous pouvez donc le supprimer ou le masquer avec l'interrupteur en forme d'œil.
## 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. `logoUrl` est la seule prop sans équivalent intégré : l'image téléversée du Header n'est **jamais rendue que par un modèle personnalisé**. Si un marchand a défini un logo et qu'il ne s'affiche pas, c'est la raison. | Prop | Type | À quoi elle sert | | -------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `title` | `string` | Le titre de l'en-tête sous forme de HTML assaini, avec `{{cart_item_count}}` et `{{total_price}}` déjà résolus. | | `logoUrl` | `string \| null` | L'image d'en-tête téléversée. `null` lorsque le marchand n'en a pas défini. | | `leftSection` | `('title' \| 'logo' \| 'close_button')[]` | Éléments sélectionnés pour la section gauche, dans l'ordre d'affichage. | | `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Éléments sélectionnés pour la section droite, dans l'ordre d'affichage. | | `itemCount` | `number` | Articles dans le panier, tels que l'acheteur les voit. | | `onClose` | `() => void` | Ferme le tiroir. Connectez-la à votre contrôle de fermeture. | | `isLoading` | `boolean` | Toujours `false` ici : le bloc affiche son squelette intégré pendant le chargement et n'appelle votre modèle qu'une fois le panier prêt. | Si vous ne connectez pas `onClose` à quelque chose, les acheteurs pourront toujours fermer le tiroir en cliquant sur l'overlay ou en appuyant sur Échap, mais votre en-tête n'aura pas de bouton de fermeture. Incluez-en toujours un.
## 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 du titre du panier. 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 titre. | 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 | Que sont les paramètres de design ? Apprenez-en plus ici : [Paramètres de design](/fr/aftersell/cart/design-settings).