> ## 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 d'en-tête

> Apprenez à mettre à jour l'en-tête de votre tiroir Upcart, y compris le logo, les styles de titre, le bouton de fermeture et la mise en page.

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

Le module d'en-tête vous permet de personnaliser la section supérieure de votre tiroir Upcart avec le logo de votre marque, le texte du titre, la mise en page, la couleur d'arrière-plan et le bouton de fermeture. Des contrôles visuels facilitent la mise en forme de votre en-tête sans avoir à définir des tailles exactes en pixels.

<div id="header-module-settings">
  # **Paramètres du module d'en-tête**
</div>

<div id="general">
  ## **Général**
</div>

Vous pouvez choisir entre les hauteurs d'en-tête Slim et Tall pour contrôler l'espace vertical. Une fine bordure inférieure peut être ajoutée ou désactivée selon vos besoins. La couleur d'arrière-plan peut être définie à l'aide d'un code hexadécimal ou du sélecteur de couleurs intégré.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Paramètres généraux du module Header d'Upcart avec les contrôles de hauteur et de couleur d'arrière-plan à côté d'un aperçu du panier" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **Titre**
</div>

Il existe **trois façons** de définir le titre de l'en-tête de votre tiroir de panier : hériter du style de titre par défaut de votre thème, afficher le logo de votre boutique, ou créer des styles de texte entièrement personnalisés. Chaque méthode offre de la flexibilité selon vos besoins de design.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Options de titre du module Header d'Upcart : hériter des titres du thème, logo de marque ou styles de texte personnalisés" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## Hériter des titres du thème
</div>

Cette option utilise les styles de titre par défaut de votre thème, vous aidant à conserver un design visuellement cohérent avec le reste de votre site. Vous pouvez ajouter votre propre titre à l'aide du champ Text et inclure dynamiquement le nombre d'articles du panier avec `{{cart_quantity}}`. L'alignement du texte peut être défini sur Side ou Center, et vous pouvez sélectionner le niveau de titre approprié H2, H3 ou H4, en fonction de la structure de contenu de votre boutique.

<div id="brand-logo">
  ## Logo de marque
</div>

Si vous préférez utiliser un logo de marque à la place du texte, vous pouvez téléverser le logo de votre boutique directement dans cette section. Choisissez d'aligner le logo sur Side ou Center, et redimensionnez-le à l'aide du curseur de taille visuel. Bien qu'il n'y ait pas de limite de taille d'image imposée, l'utilisation d'un fichier PNG est recommandée pour une transparence propre et des bords nets. Les JPEG sont également pris en charge mais peuvent inclure du bruit d'arrière-plan ou dégrader les détails du logo. Pour les performances, veillez à garder des tailles de fichier optimisées.

* Nous recommandons d'utiliser un fichier **PNG** pour une qualité optimale et la prise en charge des arrière-plans transparents.
* Les JPEG fonctionnent aussi, mais peuvent ne pas être aussi nets, surtout si votre logo a un arrière-plan ou des détails fins.

<div id="define-text-styles">
  ## Définir des styles de texte
</div>

Sélectionner l'option Text vous donne un contrôle total sur le style du titre, indépendamment du thème de votre boutique. Vous pouvez saisir n'importe quel titre personnalisé et inclure `{{cart_quantity}}` pour des mises à jour dynamiques. L'alignement du texte peut être défini sur Side ou Center, avec des options pour changer la graisse de la police en Normal, Semibold ou Bold. La taille de police est réglable de 14 px à 48 px à l'aide d'un curseur visuel, et vous pouvez éventuellement appliquer un remplacement de couleur de texte.

<div id="close-button">
  # Bouton de fermeture
</div>

Le bouton de fermeture est personnalisable pour correspondre au design de votre boutique. Vous pouvez le positionner à gauche ou à droite du tiroir. Définissez les états d'arrière-plan et de survol avec des couleurs personnalisées, ajustez la taille de l'icône (Small, Medium ou Large) et choisissez entre une épaisseur de trait d'icône Normal ou Thick. La couleur de l'icône peut être définie via un code hexadécimal ou le sélecteur de couleurs. Vous pouvez également ajouter une bordure autour de l'icône, en choisissant parmi None, Thin, Normal ou Thick, et définir une couleur de bordure de survol distincte si nécessaire.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Paramètres du bouton de fermeture du module Header d'Upcart pour l'emplacement, les couleurs, la taille de l'icône et la bordure" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

* **Vous souhaitez un espacement ou un dimensionnement précis ?** Utilisez le [CSS personnalisé](/fr/upcart/custom_css) pour un contrôle total au-delà des curseurs, idéal pour des marges, des espacements internes ou une mise à l'échelle du logo exacts.
* **Testez sur ordinateur et mobile.** Les éléments d'en-tête comme le texte, le logo et les boutons peuvent s'afficher différemment selon les tailles d'écran
* **Utilisez les bons niveaux de titre.** Choisir le bon titre (H2, H3, H4) contribue à l'accessibilité et au SEO. Respectez la structure du contenu de votre boutique.

Pour plus de façons de personnaliser votre panier, explorez notre [documentation d'aide Upcart](/fr). Si vous avez besoin de modifications personnalisées, nous vous recommandons de contacter un [Shopify Expert](https://www.shopify.com/ca/partners/directory).