Skip to main content

​
Aperçu

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.

​
Paramètres du module d’en-tête

​
Général

Height bascule entre Slim et Tall pour contrôler l’espace vertical. Bottom border est soit None, soit Thin. Background color accepte un code hexadécimal ou le sélecteur de couleurs intégré, et prend en charge la transparence. 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

​
Titre

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. Options de titre du module Header d'Upcart : hériter des titres du thème, logo de marque ou styles de texte personnalisés

​
Hériter des titres du thème

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. 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 Logo size, qui va de 14 px à 48 px. Il n’y a pas de limite imposée sur le fichier que vous téléversez, mais 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.

​
Définir des styles de texte

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.

​
Bouton de fermeture

Le bouton de fermeture est personnalisable pour correspondre au design de votre boutique. Location le positionne à gauche ou à droite du tiroir. Background, Icon et Border acceptent chacun une couleur ainsi qu’une couleur de survol distincte. Icon size est Small, Medium ou Large, et Icon thickness est Normal ou Thick. Border est None, Thin, Normal ou Thick.
Les champs de couleur de bordure et de couleur de bordure au survol sont désactivés tant que Border est défini sur None. Choisissez d’abord une épaisseur de bordure, puis définissez ses couleurs.
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

​
Modèle personnalisé

Sur la version 2.0 du module d’en-tête, un éditeur de code Custom template apparaît sous les paramètres, avec un unique modèle Full couvrant le module entier. Il utilise du JSX basé sur React, et vous devez d’abord cocher Access custom templates sous Settings > Cart settings > Advanced Settings dans l’éditeur de panier. Consultez Configurer un modèle personnalisé.

​
Conseils

  • Vous souhaitez un espacement ou un dimensionnement précis ? Utilisez le CSS personnalisé 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. Si vous avez besoin de modifications personnalisées, nous vous recommandons de contacter un Shopify Expert.