1. Docs
  2. Sections
  3. Storytelling

Storytelling

Media + Text side by side

An image or video next to a block of text with heading, text and buttons. The media can sit on the left or the right.

13 section settings6 block types · 11 settingsAvailable on every template. It cannot be placed in the header or footer

Add the section#

Available on every template. It cannot be placed in the header or footer.

  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 Media + Text side by side. Click the section in the sidebar to open its settings.
  5. Click Save in the top right corner when you are done.

Settings#

General

Load image immediately
Toggle

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

Default: Off

Media

Image
Image

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

Height
Dropdown
Default: Adapt to imageSmallMediumLarge
Placement
Dropdown
Default: Image firstImage second
Full-width layout
Toggle

Expands the section to the full screen width.

Default: Off

Content

Position
Dropdown
Default: TopMiddleBottom
Alignment
Dropdown
Default: LeftCenterRight
Mobile alignment
Dropdown
Default: LeftCenterRight

Colors

Color scheme
Color scheme

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

Default: Scheme 1
Container color scheme
Color scheme

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

Default: Scheme 1

Padding

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

Image / Decorative icon#

Up to 1 per section

General

Image or icon
Image

Transparent PNG recommended for icons.

Size
Dropdown
Default: Medium — 80pxVery small — 32pxSmall — 48pxLarge — 120pxVery large — 180px

Eyebrow#

Up to 1 per section

General

Eyebrow text
Text

The text shown in this place.

Heading#

Up to 1 per section

General

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
Heading size
Dropdown
Default: MediumSmallLargeExtra largeExtra extra large

Caption#

Up to 1 per section

General

Text
Text

The text shown in this place.

Text#

Up to 1 per section

General

Text
Rich text

Formatted text: bold, italic and links are kept.

Button#

Up to 1 per section

General

Label
Text

Leave blank to hide

Link
Link

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

Outline style
Toggle

Turn on or off.

Default: Off