En-tête et pied de page
En-tête
Logo, navigation, utilitaires, en-tête collant et en-tête transparent.
Sur cette page
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
- Mise en avant du menu
Réglages
| Réglage | Valeurs | À quoi il sert |
|---|---|---|
| Menu | MenuPar défaut : Menu « main-menu » | — |
| Logo | Image | Reprend le nom de la boutique lorsqu’il est vide. |
| Position du logoEN : Logo position |
| — |
| Largeur du logoEN : Logo width | De 40 à 320 px, par pas de 5Par défaut : 120 px | — |
| Largeur du logo sur mobileEN : Logo width on mobile | De 0 à 320 px, par pas de 5Par défaut : 0 px | Réglez sur 0 pour utiliser la largeur du logo de bureau |
| Navigation sur ordinateurEN : Desktop navigation |
| En ligne garde le menu dans la barre d’en-tête. Tiroir le déplace dans un panneau latéral sur tous les écrans, ouvert depuis l’icône de menu. |
| Ouvrir les menus auEN : Open menus on |
| Le survol ouvre un menu dès que le pointeur s’y arrête. Les écrans tactiles utilisent toujours un appui.Affiché lorsque « Navigation sur ordinateur » vaut « En ligne ». |
| Utilitaires | ||
| Afficher le lien de rechercheEN : Show search link | Case à cocherPar défaut : Activé | — |
| Menu du compte clientEN : Customer account menu | MenuPar défaut : Menu « customer-account-main-menu » | — |
| Localisation | ||
| Afficher le sélecteur de pays/régionEN : Show country/region selector | Case à cocherPar défaut : Activé | — |
| Afficher le sélecteur de langueEN : Show language selector | Case à cocherPar défaut : Activé | — |
| Style | ||
| En-tête fixeEN : Sticky header |
| — |
| Marge intérieure de l’en-têteEN : Header padding | De 6 à 20 px, par pas de 2Par défaut : 20 px | — |
| Marge intérieure de l’en-tête sur mobileEN : Header padding on mobile | De 6 à 20 px, par pas de 2Par défaut : 12 px | — |
| Afficher la bordure inférieureEN : Show bottom border | Case à cocherPar défaut : Activé | — |
| Palette de couleursEN : Color scheme | Palette de couleursPar défaut : Palette 1 | — |
| En-tête transparent | ||
| Transparent sur la page d’accueilEN : Transparent on the home page | Case à cocherPar défaut : Désactivé | — |
| Également transparent sur ces modèlesEN : Also transparent on these templates | Texte | Modèles séparés par des virgules, par exemple page.lookbook, collection.editorial |
| Palette de couleurs transparenteEN : Transparent color scheme | Palette de couleursPar défaut : Palette 1 | — |
| Logo pour l’état transparentEN : Logo for the transparent state | Image | — |
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 est automatiquement agrandi de 35 % sur ordinateur. |
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.
- 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.
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. |
| Toujours visible | L’en-tête reste en haut de l’écran en permanence. |
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’activer
Choisissez les pages
Cochez Transparent sur la page d’accueil, et/ou saisissez d’autres modèles dans Également transparent sur ces modèles, séparés par des virgules. Exemples : product (toutes les fiches produit), page.lookbook (un modèle alternatif de page), collection.editorial.
Commencez la page par un bandeau principal
L’en-tête ne devient transparent que si la première section de la page est un bandeau principal contenant au moins une diapositive.
Réglez l’apparence
Choisissez une Palette de couleurs transparente (son premier plan colore le texte et les icônes) et, si votre logo ne se lit pas sur une photo, un Logo pour l’état transparent (par exemple une version claire).
Lisibilité
Pour que le texte reste lisible quelle que soit la photographie, l’en-tête transparent peint toujours un léger voile dégradé derrière lui, mélangé à partir de l’arrière-plan de la palette transparente. Ce voile n’est pas réglable. Un palette transparente sombre (comme la palette 3) donne un voile sombre et un texte clair.
L’en-tête redevient opaque, avec sa palette habituelle, dès que l’acheteur fait défiler la page, le survole, y place le focus clavier ou ouvre un menu.
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.
Maison 1.0.0