Zeppelin StudioOpaline
  1. Docs
  2. Sections
  3. Heroes & banners

Heroes & banners

Full-screen hero

A full-height opening scene with an image or video, a large heading, buttons and an optional glass capsule that highlights a product. Several slides can follow each other.

28 section settings1 block type · 16 settingsAvailable on every template
LogoDesigned to last.Product12345
  1. 1Background image or video
  2. 2Eyebrow, heading and text
  3. 3Buttons
  4. 4Featured product in a glass card
  5. 5Scroll cue

Add the section#

Available on every template.

  1. From your Shopify admin, go to Online Store > Themes, then click Customize next to Opaline.
  2. Use the page selector at the top of the editor to open the template you want to change.
  3. In the sidebar, click Add section where you want it to appear.
  4. Select Full-screen hero. Click the section in the sidebar to open its settings.
  5. Click Save in the top right corner when you are done.

Settings#

Background

Image
Image

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

Mobile image
Image

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

Video (replaces the image)
Video

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

Play the video on mobile
Toggle

Off by default: a video weighs several megabytes and phones are usually on mobile data. The mobile image is shown instead.

Default: Off
Height
Slider
Default: 100vhFrom 60 to 100vh, in steps of 5
Darkening
Slider
Default: 40%From 0 to 90%, in steps of 5
Slow zoom
Slider

Cinematic drift applied to the background.

Default: 6%From 0 to 12%, in steps of 1
Film grain overlay
Toggle

Turn on or off.

Default: On

Content

Overline
Text

The text shown in this place.

Heading
Rich text

Use italics for accent words.

Heading size
Slider
Default: 100%From 60 to 180%, in steps of 5
Text
Rich text

Formatted text: bold, italic and links are kept.

Alignment
Dropdown
Default: LeftCenter
Text color
Color

Pick a color, or type its hex code.

Default: #FFFFFF

Buttons

Primary button
Text

The text shown in this place.

Primary link
Link

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

Secondary link
Text

The text shown in this place.

Secondary link URL
Link

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

Glass capsule

Product
Product

Choose one of your products.

Capsule label
Text

The text shown in this place.

Capsule title
Text

Leave empty to use the product title.

Capsule link
Link

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

Slideshow

Add a slide below to turn the hero into a slideshow. With no slide, the hero keeps the single image and text set above.
Advance slides automatically
Toggle

A pause button appears next to the arrows, as accessibility requires. Visitors who ask for reduced motion never get the automatic advance.

Default: Off
Seconds per slide
Slider
Default: 6sFrom 3 to 15s, in steps of 1

Details

Scroll indicator
Toggle

Turn on or off.

Default: On
Scroll label
Text

The text shown in this place.

Color scheme
Color scheme

The color scheme of the section. Schemes are set under Theme settings > Colors.

Default: Scheme 1
Heading typeface
Dropdown

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

Default: Theme defaultHeading fontBody fontSans-serif heading font

Blocks#

Up to 6 blocks per section. Click Add block under the section in the sidebar, then drag blocks to reorder them.

Slide#

General

Image
Image

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

Mobile image
Image

Optional. Shown below 750 px, and it is the only one downloaded there.

Darkening
Slider

Set per slide: a bright photograph needs more than a dark one to keep the text readable.

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

Content

Overline
Text

The text shown in this place.

Heading
Rich text

Formatted text: bold, italic and links are kept.

Text
Rich text

Formatted text: bold, italic and links are kept.

Alignment
Dropdown
Default: LeftCenter
Text color
Color

Pick a color, or type its hex code.

Default: #FFFFFF

Buttons

Primary button
Text

The text shown in this place.

Primary link
Link

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

Secondary link
Text

The text shown in this place.

Secondary link URL
Link

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

Glass capsule

Product
Product

Choose one of your products.

Capsule label
Text

The text shown in this place.

Capsule title
Text

Leave empty to use the product title.

Capsule link
Link

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