03GéNéRAL

En-tête Opaline

Cette page explique le comportement réel de « En-tête Opaline », les données dont il dépend et l’effet de ses réglages.

À QUOI CELA SERT

En-tête Opaline

Cette page explique le comportement réel de « En-tête Opaline », les données dont il dépend et l’effet de ses réglages.

COMPORTEMENTS IMPLICITES

Ce que le thème fait automatiquement

→
Le menu et les mega menus utilisent les menus Shopify sélectionnés ; leur contenu n’est pas dupliqué dans la section.
→
Les sélecteurs de pays et langue n’apparaissent que si plusieurs options sont publiées dans Shopify Markets.
→
Le mode sticky ou masqué au défilement repose sur le seuil configuré et s’adapte séparément au mobile.
→
Le menu mobile peut se fermer automatiquement après la sélection d’un lien afin d’éviter de masquer la nouvelle destination.
→
Les langues, pays et devises disponibles proviennent des paramètres Marchés de Shopify.

CONFIGURATION

Comprendre les réglages

Identité

Ajoutez le logo et les éléments qui identifient la marque.

Logologo

Largeur du logologo_width

Par défaut : 140 · Plage : 60–240px

Afficher le nom de la boutiqueshow_shop_name

Par défaut : activé

Position de la marque sur ordinateurbrand_position

Par défaut : left · Choix : À gauche, Au centre, À droite

Navigation

Choisissez le menu principal et le comportement d’ouverture de la navigation.

Menu principalmenu

Par défaut : main-menu

Disposition sur ordinateur

En mode automatique, la navigation reste près du logo lorsqu’elle tient, passe sur une ligne dédiée si nécessaire, puis regroupe uniquement les liens excédentaires dans un tiroir. Le calcul est effectué après le chargement des polices et à chaque redimensionnement. Aucun intitulé de menu n’est coupé : les liens qui ne tiennent pas sont déplacés vers le tiroir.

Disposition du menudesktop_navigation_layout

Le mode automatique empêche le menu de chevaucher le logo ou les actions.

Par défaut : auto · Choix : Automatique (recommandé), Même ligne que le logo, Toujours sur une ligne dédiée, Toujours dans un tiroir

Alignement sur la ligne dédiéedesktop_navigation_alignment

Par défaut : center · Choix : À gauche, Au centre, À droite

Affichage du bouton des liens supplémentairesoverflow_button_style

Par défaut : count · Choix : + nombre, + libellé et nombre, + uniquement

Libellé du bouton supplémentaireoverflow_button_label

Titre du tiroir supplémentaireoverflow_drawer_title

Largeur du tiroir sur ordinateurdesktop_drawer_width

S’applique au tiroir complet et au tiroir des liens supplémentaires.

Par défaut : 420 · Plage : 320–560px

Menu du compte clientcustomer_account_menu

Ouverture des menus sur ordinateurmenu_open_mode

Par défaut : hover · Choix : Au clic, Au survol et au clavier

Hauteur maximale des méga-menusmega_menu_height

Par défaut : 600 · Plage : 360–760px

Actions

Personnalisez les libellés des commandes disponibles dans cette interface.

Afficher la rechercheshow_search

Par défaut : activé

Afficher le compte clientshow_account

Par défaut : activé

Afficher le paniershow_cart

Par défaut : activé

Réseaux sociaux et localisation

Organisez les outils sociaux, linguistiques et géographiques de l’en-tête.

Position sur ordinateurtools_position

Par défaut : topbar · Choix : Dans la barre supérieure, Avec les icônes d’action

Alignement dans la barre supérieuretools_alignment

Par défaut : end · Choix : À gauche, À droite

Ordre des élémentstools_order

Par défaut : socials_first · Choix : Réseaux puis localisation, Localisation puis réseaux

Afficher le sélecteur de langueshow_language

Par défaut : activé

Format des langues et payslocalization_label_style

Par défaut : full_currency · Choix : Libellé entier + devise, Libellé entier (Français, France), Code + devise, Code uniquement (FR)

Afficher les drapeauxshow_localization_flags

Les drapeaux de langue sont associés automatiquement au code linguistique.

Par défaut : activé

Afficher le sélecteur de paysshow_country

Par défaut : activé

Bannière d’annonces

Activez la bannière et réglez son défilement sur ordinateur et sur mobile.

Afficher la bannièreshow_announcement

Par défaut : activé

Afficher la bannière sur mobileshow_announcement_mobile

Par défaut : activé

Présentation des annoncesannouncement_mode

Par défaut : scroll · Choix : Défilement continu, Messages fixes

Sens du défilementannouncement_direction

Par défaut : left · Choix : Vers la gauche, Vers la droite

Durée du défilementannouncement_speed

Par défaut : 28 · Plage : 10–60s

Mettre en pause au survolpause_announcement

Par défaut : activé

Couleurs du verre

Activez des couleurs propres à l’en-tête et personnalisez ses surfaces translucides.

Utiliser des couleurs personnaliséesuse_custom_background

Par défaut : désactivé

Couleur de fond du headerbackground_color

Par défaut : #2F3030

Opacité du fond du headerbackground_opacity

Par défaut : 40 · Plage : 0–100%

Couleur de fond des menusmenu_background_color

Par défaut : #2F3030

Opacité du fond des menusmenu_background_opacity

Par défaut : 55 · Plage : 0–100%

Comportement au défilement

Choisissez la réaction de l’en-tête au scroll et le seuil qui déclenche son changement.

Comportement du headerscroll_behavior

Par défaut : hide-on-scroll · Choix : Non fixe, Toujours visible, Masquer en descendant, Afficher après défilement

Seuil de déclenchementscroll_threshold

Par défaut : 100 · Plage : 20–400px

Dimensions

Ajustez les tailles et espacements de la section selon l’appareil.

Largeur du headerheader_width

Par défaut : full · Choix : Largeur du thème, Pleine largeur avec marges

Hauteur sur ordinateurdesktop_height

Par défaut : 80 · Plage : 64–104px

Hauteur sur mobilemobile_height

Par défaut : 68 · Plage : 56–84px

Espacement supérieurtop_spacing

Par défaut : 16 · Plage : 0–40px

Finition du cadre

Activer l’effet liquid glassenable_liquid_glass

Par défaut : activé

Afficher la luminosité à gaucheshow_glass_left_glow

Désactivez cette option pour obtenir une surface glass plus uniforme, sans reflet lumineux décoratif à gauche.

Par défaut : activé

Couleur de bordureborder_color

Par défaut : #FFFFFF

Coins arrondiscorner_style

Par défaut : all · Choix : Aucun, Tous les coins, Uniquement en haut, Uniquement en bas

Décalage vers le basrounded_offset

Par défaut : 0 · Plage : 0–40px

Espacement supérieur sur mobilemobile_top_spacing

Par défaut : 8 · Plage : 0–24px

Point de bascule mobilemobile_breakpoint

Par défaut : 920 · Plage : 760–1100px

Options mobiles

Choisissez les éléments masqués et le comportement du menu sur petit écran.

Masquer le nom de la boutique sur petit écranhide_mobile_name

Par défaut : désactivé

Afficher la recherche uniquement dans le tiroirhide_mobile_search

Par défaut : activé

Afficher le compte uniquement dans le tiroirhide_mobile_account

Par défaut : activé

Fermer le tiroir après un clic sur un lienclose_mobile_after_link

Par défaut : activé

Palette de la section

Applique une palette cohérente au fond, au texte et aux boutons de cette section.

Apparence de la section

Utiliser une palette dédiéeopaline_use_color_scheme

Par défaut : désactivé

Paletteopaline_color_scheme

Par défaut : scheme-1

Espacement

Espace après la sectionopaline_section_spacing

Crée un espace entre cette section et la suivante. L’espacement mobile s’adapte automatiquement.

Par défaut : 0 · Plage : 0–160px

Retrait à gauche et à droiteopaline_content_inset

Éloigne le contenu des bords. L’espacement mobile s’adapte automatiquement.

Par défaut : 0 · Plage : 0–120px

COMPOSITION