En-tête

L’en-tête est un cadre discret : la navigation, les icônes de recherche, de compte et de panier, et le logo, seul élément de grande taille. Il fait partie du groupe En-tête et s’affiche sur toutes les pages sauf la page de mot de passe.

Nom dans l’éditeur

En-tête (EN : Header)

Où l’ajouter

Groupe En-tête (toutes les pages)

Instances

1 par page au maximum

Blocs acceptés

Lien utilitaireMise en avant du menu

Réglages

Logo

Si aucun logo n’est choisi, le nom de la boutique s’affiche en texte, dans la police des titres. Le logo accepte toutes les proportions (horizontal, carré, vertical) : réglez sa largeur avec Largeur du logo, et sur téléphone avec Largeur du logo sur mobile (0 reprend la largeur ordinateur).

Position du logo propose trois dispositions sur ordinateur :

Position	Disposition
Milieu gauche	Logo, puis navigation, puis icônes
Milieu centré (par défaut)	Navigation à gauche, logo au centre, icônes à droite
Haut centré	Logo centré sur une première ligne, navigation centrée sur une seconde. Le logo garde la largeur réglée dans Largeur du logo.

Navigation

• Navigation sur ordinateur > En ligne : les éléments du menu sont dans la barre d’en-tête. Les sous-menus s’ouvrent au survol ou au clic, selon Ouvrir les menus au. Sur écran tactile, c’est toujours un toucher. Dans les deux cas, un sous-menu ouvert se ferme dès que le focus clavier passe à un autre élément ou sort de l’en-tête.
• Navigation sur ordinateur > Tiroir : le menu est rangé dans un panneau latéral sur tous les écrans, ouvert par l’icône de menu.

En dessous de 990 px de large, le menu est toujours dans le tiroir.

Pour construire les menus, sous-menus et le méga-menu, voir Menus et méga-menu.

Icônes utilitaires

• Recherche — affichée si Afficher le lien de recherche est coché. Elle ouvre le panneau ou la page de recherche selon Paramètres du thème > Recherche.
• Compte — affichée si les comptes clients sont activés dans ParamètresComptes clients. Elle utilise le composant de connexion de Shopify, qui affiche un menu de compte ; le menu choisi dans Menu du compte client y est proposé.
• Panier — affiche le nombre d’articles. Elle ouvre le tiroir ou la page panier selon Paramètres du thème > Panier.

Utilitaires choisit leur affichage sur ordinateur : Icônes, ou Mots, qui écrivent en toutes lettres la recherche, le compte et le panier avec son nombre d’articles. Sur téléphone, ce sont toujours des icônes.

Pour ajouter un lien à vous, comme « Prendre rendez-vous », ajoutez un bloc Lien utilitaire à la section En-tête et renseignez Libellé du lien et Lien : il s’affiche en toutes lettres à côté des icônes sur ordinateur, et en bas du tiroir de menu sur téléphone. Un bloc auquel il manque l’un des deux champs n’affiche rien.

Sélecteurs de pays et de langue

Les sélecteurs s’affichent uniquement si votre boutique propose plusieurs pays (dans ParamètresMarchés) ou plusieurs langues publiées (dans ParamètresLangues). Sinon, rien ne s’affiche, même avec les cases cochées.

Sur ordinateur, le sélecteur est dans l’en-tête et affiche par exemple FR · EUR · Français. En dessous de 990 px, il se trouve en bas du tiroir de menu. Voir Langues et devises.

En-tête fixe

Réglage	Comportement
Non fixe	L’en-tête défile avec la page.
Afficher au défilement vers le haut (par défaut)	L’en-tête se cache quand l’acheteur descend et réapparaît dès qu’il remonte. Il reste visible tant qu’un menu est ouvert ou que le focus clavier s’y trouve. Un lien vers un endroit de la même page le fait revenir avant que la page ne se déplace, pour que cet endroit arrive juste sous lui.
Toujours visible	L’en-tête reste en haut de l’écran en permanence.

Marge intérieure de l’en-tête règle l’espace au-dessus et au-dessous du contenu de l’en-tête sur ordinateur, et Marge intérieure de l’en-tête sur mobile sur téléphone. Afficher la bordure inférieure trace un filet sous l’en-tête.

En-tête transparent

L’en-tête peut se poser par-dessus le bandeau principal, pour que la photographie commence tout en haut de l’écran. L’en-tête livré avec le thème l’a activé : une page d’accueil qui s’ouvre par un bandeau principal commence donc avec un en-tête transparent.

L’activer

Lisibilité

Pour que le texte reste lisible quelle que soit la photographie, le bandeau principal peint un léger voile dégradé en haut de la photographie, derrière l’en-tête transparent, mélangé à partir de l’arrière-plan de la palette transparente. Ce voile n’est pas réglable. Une palette transparente sombre (comme la palette 3) donne un voile sombre et un texte clair.

L’en-tête n’est transparent qu’à sa place, en haut de la page. Dès que l’acheteur fait défiler la page, tout dépend de En-tête fixe :

• Afficher au défilement vers le haut : l’en-tête s’en va avec la photographie, puis revient opaque, avec sa palette habituelle, quand l’acheteur remonte. Il redevient transparent une fois la page revenue en haut.
• Toujours visible : l’en-tête devient opaque dès que la page défile, et redevient transparent une fois revenu en haut.
• Non fixe : l’en-tête reste transparent et s’en va avec la photographie.

Il devient aussi opaque tant qu’un menu est ouvert. Le survoler ou y placer le focus clavier ne le change pas.

Accessibilité

Sur la page d’accueil, le logo sert de titre principal (h1) de la page. Un lien « Passer au contenu » permet aux utilisateurs du clavier de sauter directement au contenu.