Statement with images — Opaline documentation

A sentence in large type with product photographs set between the words like oversized characters. Each photograph can link somewhere and show a caption on hover.

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

Settings#

General

A fixed sentence with cut-out packshots set into the text. Add words and shots in the order you want them read.

Overline
Text

The text shown in this place.

Edge to edge
Toggle

Drops the page gutter so the sentence and its packshots run the full width.

Default: Off

Sentence size
Slider

Default: 100%From 60 to 180%, in steps of 5

Line spacing
Slider

Space between the lines of the sentence. Below 100 the lines overlap.

Default: 112%From 80 to 240%, in steps of 2

Mobile

Sentence size (mobile)
Slider

Multiplies the sentence size on phones. The packshots follow, so the composition keeps its proportions.

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

Line spacing (mobile)
Slider

Space between the lines on phones. The packshots follow the text size, so the lines can stay close.

Default: 120%From 80 to 240%, in steps of 2

Lighting sweep

Starts at
Slider

Height on screen where the sweep begins, as a share of the viewport.

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

Ends at
Slider

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

Footer link

Link label
Text

The text shown in this place.

Link
Link

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

Layout

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

Blocks#

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

Words#

General

Text
Text

Each word lights up in turn.

Italic
Toggle

Turn on or off.

Default: Off

Packshot#

General

Cut-out image
Image

Works best on a transparent background.

Product
Product

Used if no image is set.

Size
Slider

Relative to the text: 12 is about the height of a capital letter.

Default: 14From 6 to 30, in steps of 1

Tilt
Slider

Default: 0°From -12 to 12°, in steps of 1

Scroll drift
Slider

Default: 6%From 0 to 20%, in steps of 1

Glass caption
Text

Appears on hover.

Link
Link

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

Good to know#

Tip

Cut-out product photos often keep a wide transparent margin. If one product looks smaller than the others, raise its Size until the drawings look the same.