Cinematic intro — Opaline documentation

Open your store with a short logo animation: your logo appears over frosted glass, a photograph or a solid color, then gives way to the page.

Turn it on#

In the theme editor, click Header in the sidebar.
Scroll to Cinematic intro and turn on Enable the cinematic intro.
Choose the Intro backdrop: frosted glass over the page, a photograph, or a solid color.
Set the Logo size, Logo color and how long it Holds, then decide when to Show it.
Click Save.

Settings#

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

Good to know#

Good to know

The intro uses the logo of the header. Set it under Header > Logo header first; a transparent PNG or SVG works best.

Tip

Visitors who ask their device to reduce motion skip the intro. Showing it once per session keeps returning visitors from waiting on every page.