Zeppelin StudioOpaline
  1. Docs
  2. Sections
  3. Storytelling

Storytelling

Before / After

A slider that compares two photographs: before and after, or two finishes. Visitors drag the handle or use the arrow keys.

18 section settings1 block type · 6 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 Before / After. Click the section in the sidebar to open its settings.
  5. Click Save in the top right corner when you are done.

Settings#

General

Format
Dropdown
Default: 4:316:9 (landscape)1:1 (square)21:9 (cinema)9:16 (vertical)
Mobile image format
Dropdown

Applies below 990px.

Default: 1:1 (square)Same as desktop16:9 (landscape)4:321:9 (cinema)9:16 (vertical)
Heading alignment
Dropdown
Default: LeftCenterRight
Section background color
Color

Pick a color, or type its hex code.

Parallax effect
Toggle

Turn on or off.

Default: On
Label
Text

The text shown in this place.

Show the overline rule
Toggle

The short line drawn beside the overline.

Default: On
Heading
Text

The text shown in this place.

Text
Text

The text shown in this place.

Heading size
Slider
Default: 100%From 60 to 200%, in steps of 5
Overline size
Slider
Default: 100%From 60 to 200%, in steps of 5
Body text size
Slider
Default: 100%From 70 to 180%, in steps of 5
Heading color
Color

Pick a color, or type its hex code.

Overline color
Color

Pick a color, or type its hex code.

Description text color
Color

Pick a color, or type its hex code.

Top spacing
Slider
Default: 64pxFrom 0 to 120px, in steps of 4
Bottom spacing
Slider
Default: 64pxFrom 0 to 120px, 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.

Comparison#

General

Comparison title
Text

The text shown in this place.

Before image
Image

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

After image
Image

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

Before label
Text

The text shown in this place.

After label
Text

The text shown in this place.

Initial position
Slider
Default: 50%From 10 to 90%, in steps of 5