03GENERAL

Opaline header

This page explains how “Opaline header” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Opaline header

This page explains how “Opaline header” actually behaves, which data it depends on, and what its settings change.

IMPLICIT BEHAVIOR

What the theme does automatically

→
Menus and mega menus use the selected Shopify menus; their content is not duplicated in the section.
→
Country and language selectors only appear when multiple options are published in Shopify Markets.
→
Sticky or hide-on-scroll behavior uses the configured threshold and adapts separately on mobile.
→
The mobile menu can close automatically after selecting a link so it does not cover the new destination.
→
Available languages, countries, and currencies come from Shopify Markets settings.

CONFIGURATION

Understand the settings

Identity

Add the logo and elements that identify the brand.

Logologo

Logo widthlogo_width

Default: 140 · Range: 60–240px

Show store nameshow_shop_name

Default: enabled

Brand position on desktopbrand_position

Default: left · Options: On the left, In the center, Right

Navigation

Choose the main menu and navigation opening behavior.

Main menumenu

Default: main-menu

Desktop layout

In automatic mode, the navigation stays beside the logo when it fits, moves to a dedicated row when needed, then groups only the overflow links in a drawer. The layout is calculated after fonts load and on every resize. Menu labels are never cut off: links that do not fit move into the drawer.

Menu layoutdesktop_navigation_layout

Auto mode prevents the menu from overlapping the logo or actions.

Default: auto · Options: Automatic (recommended), Same line as the logo, Always on a dedicated line, Always in a drawer

Alignment on the dedicated linedesktop_navigation_alignment

Default: center · Options: On the left, In the center, Right

Showing additional links buttonoverflow_button_style

Default: count · Options: + number, + wording and number, + only

Additional button labeloverflow_button_label

Additional drawer titleoverflow_drawer_title

Drawer width on desktopdesktop_drawer_width

Applies to the full drawer and the additional links drawer.

Default: 420 · Range: 320–560px

Customer account menucustomer_account_menu

Opening menus on a desktopmenu_open_mode

Default: hover · Options: On click, On hover and keyboard

Maximum height of mega menusmega_menu_height

Default: 600 · Range: 360–760px

Actions

Customize the labels of the commands available in this interface.

Show searchshow_search

Default: enabled

View customer accountshow_account

Default: enabled

Show cartshow_cart

Default: enabled

Social networks and location

Organize the header's social, linguistic, and geographic tools.

Position on desktoptools_position

Default: topbar · Options: In the top bar, With action icons

Alignment in the top bartools_alignment

Default: end · Options: On the left, Right

Order of elementstools_order

Default: socials_first · Options: Networks then localization, Location then networks

Show language switchershow_language

Default: enabled

Format of languages and countrieslocalization_label_style

Default: full_currency · Options: Full description + currency, Full wording (French, France), Code + currency, Code only (FR)

Show flagsshow_localization_flags

Language flags are automatically associated with the language code.

Default: enabled

Show country selectorshow_country

Default: enabled

Announcement banner

Activate the banner and adjust its scrolling on desktop and mobile.

Show bannershow_announcement

Default: enabled

Show banner on mobileshow_announcement_mobile

Default: enabled

Presentation of announcementsannouncement_mode

Default: scroll · Options: Continuous scrolling, Fixed messages

Scroll directionannouncement_direction

Default: left · Options: To the left, To the right

Scroll durationannouncement_speed

Default: 28 · Range: 10–60s

Pause on hoverpause_announcement

Default: enabled

Glass colors

Activate header-specific colors and customize its translucent surfaces.

Use custom colorsuse_custom_background

Default: disabled

Header background colorbackground_color

Default: #2F3030

Opacity of the header backgroundbackground_opacity

Default: 40 · Range: 0–100%

Menu background colormenu_background_color

Default: #2F3030

Menu background opacitymenu_background_opacity

Default: 55 · Range: 0–100%

Scrolling behavior

Choose how the header reacts to scrolling and the threshold that triggers its change.

Header behaviorscroll_behavior

Default: hide-on-scroll · Options: Not fixed, Always visible, Hide on descending, Show after scrolling

Trigger thresholdscroll_threshold

Default: 100 · Range: 20–400px

Dimensions

Adjust the section sizes and spacing according to the device.

Header widthheader_width

Default: full · Options: Theme width, Full width with margins

Height on desktopdesktop_height

Default: 80 · Range: 64–104px

Height on mobilemobile_height

Default: 68 · Range: 56–84px

Top Spacingtop_spacing

Default: 16 · Range: 0–40px

Frame style

Enable the liquid glass effectenable_liquid_glass

Default: enabled

Show the left glass highlightshow_glass_left_glow

Turn this off for a more even glass surface without the decorative light on the left.

Default: enabled

Border colorborder_color

Default: #FFFFFF

Rounded cornerscorner_style

Default: all · Options: None, All corners, Top only, Bottom only

Downward offsetrounded_offset

Default: 0 · Range: 0–40px

Greater spacing on mobilemobile_top_spacing

Default: 8 · Range: 0–24px

Moving tipping pointmobile_breakpoint

Default: 920 · Range: 760–1100px

Mobile options

Choose hidden items and menu behavior on small screens.

Hide store name on small screenhide_mobile_name

Default: disabled

Show search only in drawerhide_mobile_search

Default: enabled

Show account only in drawerhide_mobile_account

Default: enabled

Close the drawer after clicking on a linkclose_mobile_after_link

Default: enabled

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme

Default: disabled

Paletteopaline_color_scheme

Default: scheme-1

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px

Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px

COMPOSITION