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

Heroes & banners

Floating showcase

Images placed freely around a central heading, drifting at different speeds as visitors scroll. Each image can carry a glass tag and link to a product.

12 section settings1 block type · 13 settingsAvailable on every template

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 Floating showcase. Click the section in the sidebar to open its settings.
  5. Click Save in the top right corner when you are done.

Settings#

General

Overline
Text

The text shown in this place.

Heading
Rich text

Very large type. Objects float in front of and behind it.

Heading size
Slider
Default: 100%From 60 to 200%, in steps of 5
Stage height
Slider
Default: 95vhFrom 60 to 130vh, in steps of 5
Text
Rich text

Formatted text: bold, italic and links are kept.

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.

Background
Gradient

A CSS background, for example a gradient.

Color scheme
Color scheme

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

Default: Scheme 1
Top padding
Slider
Default: 80pxFrom 0 to 240px, in steps of 4
Bottom padding
Slider
Default: 80pxFrom 0 to 240px, in steps of 4
Heading typeface
Dropdown

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

Default: Theme defaultHeading fontBody fontSans-serif heading font

Blocks#

Click Add block under the section in the sidebar to add one, then drag blocks to reorder them.

Floating object#

Up to 6 per section

General

Image
Image

Cut-out images on a transparent background work best.

Product
Product

Used if no image is set.

Link
Link

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

Glass tag
Text

The text shown in this place.

Layer
Dropdown
Default: In front of the headingBehind the heading
Position X
Slider
Default: 10%From -10 to 90%, in steps of 1
Position Y
Slider
Default: 20%From -10 to 90%, in steps of 1
Width
Slider
Default: 26remFrom 10 to 60rem, in steps of 1
Rotation
Slider
Default: 0degFrom -20 to 20deg, in steps of 1
Parallax
Slider
Default: 16%From 0 to 60%, in steps of 2

Mobile

Position X (mobile)
Slider
Default: 10%From -20 to 80%, in steps of 1
Position Y (mobile)
Slider
Default: 20%From -10 to 90%, in steps of 1
Width (mobile)
Slider
Default: 14remFrom 6 to 32rem, in steps of 1