Header — Opaline documentation

Your logo, main menu, search, account and cart. On the home page the header can sit transparent over the opening image and turn into frosted glass as visitors scroll. It can also open the site with a short cinematic logo intro.

Find the section#

It lives in the Header area at the top of the sidebar and appears on every page.

Settings#

General

Logo header
Image

Select an image from your Files, or upload a new one.

Logo over image
Image

Shown when the transparent header is active (over a hero). Falls back to the header logo if empty.

Logo text
Text

Used if no image. Empty = store name.

Logo width
Slider

Default: 130pxFrom 80 to 300px, in steps of 10

Logo max height
Slider

Caps the logo so a tall lockup cannot overflow the header. The drawing is fitted inside, never stretched.

Default: 48pxFrom 24 to 120px, in steps of 2

Shrink logo on scroll
Toggle

Turn on or off.

Default: On

Logo width on scroll
Slider

Default: 100pxFrom 60 to 260px, in steps of 10

Logo position
Dropdown

Default: CenterLeft

Cinematic intro

A full-screen opening on the home page: the logo held large over a blurred field, then the blur lifts and the logo travels into the header. Click, tap or any key skips it.

Enable the cinematic intro
Toggle

Turn on or off.

Default: Off

Intro backdrop
Dropdown

Glass blurs the page itself behind the logo. Image uses a blurred picture instead.

Default: Glass over the pageImage or color

Background image
Image

Use the same image as the cinematic hero so the intro resolves into it. Left empty, a soft light field is drawn instead.

Background color
Color

Pick a color, or type its hex code.

Default: #0F0F0E

Blur
Slider

Default: 34pxFrom 0 to 80px, in steps of 2

Darkening
Slider

Raise it if the logo does not stand out against the image.

Default: 34%From 0 to 80%, in steps of 2

Logo size
Slider

Default: 440pxFrom 160 to 900px, in steps of 20

Logo color
Color

Applies when no logo image is set.

Default: #FAF9F6

Hold
Slider

How long the logo stays large before the intro resolves.

Default: 1400msFrom 400 to 4000ms, in steps of 100

Show
Dropdown

Default: On every visitOnce per session

Menu
Menu

Choose a menu. Menus are edited in Shopify admin > Content > Menus.

Menu type (desktop, if inline nav)
Dropdown

Default: DropdownMega menuBurger (drawer)

Center the menu (when logo is left)
Toggle

Turn on or off.

Default: On

Menu size
Slider

Default: 11pxFrom 10 to 20px, in steps of 1

Icon size
Slider

Default: 18pxFrom 16 to 32px, in steps of 1

Transparent header

Transparent header on the home page
Toggle

Turn on or off.

Default: On

Frosted glass effect (liquid glass)
Toggle

Turn on or off.

Default: On

Text color (transparent)
Color

Pick a color, or type its hex code.

Default: #FFFFFF

Scroll threshold
Slider

Default: 40pxFrom 0 to 200px, in steps of 10

Opaque header

Background color
Color

Used when the transparent header is switched off.

Default: #FFFFFF

Shown when Transparent header on the home page is off.

Text color
Color

Pick a color, or type its hex code.

Default: #151515

Shown when Transparent header on the home page is off.

Margins

Vertical margin
Slider

Default: 10pxFrom 0 to 60px, in steps of 2

Bottom padding
Slider

Default: 8pxFrom 0 to 60px, in steps of 2

Horizontal padding offset
Slider

Added to the page gutter, so the header lines up with the sections below.

Default: 0pxFrom -40 to 40px, in steps of 4

Mobile padding

Vertical padding
Slider

Default: 8pxFrom 0 to 40px, in steps of 2

Bottom padding
Slider

Default: 8pxFrom 0 to 40px, in steps of 2

Horizontal padding offset
Slider

Default: 0pxFrom -20 to 40px, in steps of 2

Good to know#

Tip

The transparent header only applies to the home page. Everywhere else the header uses the colors under Opaque header.

Good to know

The menu is chosen in the Menu setting. Nested items in that menu become a mega menu: see Navigation & mega menu.