Image / video banner — Opaline documentation

A full-width image or video with an eyebrow, heading, text and buttons. The text can sit on the image, on an overlay, or inside a frosted glass box, with optional parallax.

Add the section#

Available on every template.

From your Shopify admin, go to Online Store > Themes, then click Customize next to Opaline.
Use the page selector at the top of the editor to open the template you want to change.
In the sidebar, click Add section where you want it to appear.
Select Image / video banner. Click the section in the sidebar to open its settings.
Click Save in the top right corner when you are done.

Settings#

General

Load image immediately
Toggle

Turn this on only for the banner that opens the page. Elsewhere it delays the images the visitor actually sees.

Default: Off

Width
Dropdown

Default: Full widthSmallMediumLarge

Format
Dropdown

Default: 16:9 (landscape)4:31:1 (square)21:9 (cinema)9:16 (vertical)

Top margin
Slider

Default: 0pxFrom 0 to 120px, in steps of 4

Bottom margin
Slider

Default: 0pxFrom 0 to 120px, in steps of 4

Media

Parallax effect
Toggle

Turn on or off.

Default: On

Media type
Dropdown

Default: ImageVideo

Image
Image

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

Image (mobile)
Image

Optional. Shown instead of the image on mobile (≤ 749px), for a portrait crop.

Video
Video

Select a video from your Files, or upload a new one.

Text readability

Background behind text
Dropdown

Default: Overlay on imageNoneText box (opaque)Text box (frosted glass)

Overlay opacity
Slider

Default: 35%From 0 to 90%, in steps of 5

Glass opacity
Slider

Default: 40%From 0 to 95%, in steps of 5

Glass blur
Slider

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

Box color (opaque)
Color

Pick a color, or type its hex code.

Default: #151515

Content

Text position
Dropdown

Default: Middle centerTop leftTop centerMiddle leftBottom leftBottom center

Mega heading
Toggle

Sets the heading at display scale, edge to edge.

Default: Off

Eyebrow
Text

The text shown in this place.

Heading
Rich text

Text on one line; bold, italic and links are kept.

Heading level
Dropdown

Sets the HTML level, for page structure and screen readers. It does not change the size — use Heading size for that. A page should carry exactly one H1.

Default: H2H1H3

Subtitle
Rich text

Formatted text: bold, italic and links are kept.

Eyebrow (over-title) size
Slider

Default: 100%From 60 to 200%, in steps of 10

Heading size
Slider

Default: 100%From 60 to 300%, in steps of 10

Body text size
Slider

Default: 100%From 70 to 300%, in steps of 10

Mobile — text sizes

Eyebrow size (mobile)
Slider

Default: 100%From 40 to 200%, in steps of 5

Heading size (mobile)
Slider

Default: 100%From 30 to 300%, in steps of 5

Body text size (mobile)
Slider

Default: 100%From 50 to 160%, in steps of 5

Button size (mobile)
Slider

Default: 100%From 50 to 200%, in steps of 5

Text color
Color

Pick a color, or type its hex code.

Default: #FFFFFF

Button

Button label
Text

The text shown in this place.

Button link
Link

Where the link leads: a product, a collection, a page, or any web address.

Second button label
Text

Shown next to the first button, split by a separator.

Second button link
Link

Where the link leads: a product, a collection, a page, or any web address.

Button style
Dropdown

Default: Liquid glassFilledOutlineUnderlined

Button size
Dropdown

Default: MediumSmallLarge

Button color
Color

Pick a color, or type its hex code.

Default: #FFFFFF

Button text color
Color

Pick a color, or type its hex code.

Default: #151515

Mobile layout

Image format (mobile)
Dropdown

Default: SquarePortraitLandscapeOriginal

Heading typeface
Dropdown

Theme default follows the section heading font chosen in Theme settings > Typography.

Default: Theme defaultHeading fontBody fontSans-serif heading font