03GENERAL

Opaline slideshow

This page explains how “Opaline slideshow” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Opaline slideshow

This page explains how “Opaline slideshow” actually behaves, which data it depends on, and what its settings change.

Used in templates

article.ingredients.jsonarticle.skin-essentials.jsonblog.jsonblog.main-blog.jsonindex.jsonpage.faq.jsonpage.find-your-routine.jsonpage.ingredient-library.jsonpage.jsonpage.our-philosophy.jsonpage.our-story.jsonpage.skin-concerns.jsonpage.take-the-skin-quiz.json

IMPLICIT BEHAVIOR

What the theme does automatically

→
Autoplay stops when users interact so it does not fight their navigation.
→
Desktop and mobile heights are independent; images must be checked in both formats.
→
Overlay and blur improve readability but do not replace sufficient text contrast.

CONFIGURATION

Understand the settings

Accessibility

Give the slideshow a meaningful name for assistive technologies.

Accessibility labelaccessibility_label

This text describes the assistive technologies section and is not displayed visually.

Dimensions

Set the height of the slideshow and the maximum width of its content.

Height on desktopheight_desktop

Default: 720 · Range: 420–980px

Height on mobileheight_mobile

Default: 620 · Range: 420–820px

Maximum content widthcontent_width

Default: 620 · Range: 360–760px

Content spacing

Adjust the breathing room around slide text independently on desktop and mobile.

Horizontal content paddingcontent_padding_horizontal

Default: 48 · Range: 0–160px

Vertical content paddingcontent_padding_vertical

Default: 80 · Range: 0–200px

Horizontal content padding — mobilecontent_padding_horizontal_mobile

Default: 24 · Range: 0–80px

Vertical content padding — mobilecontent_padding_vertical_mobile

Default: 56 · Range: 0–160px

Visual effect

Adjust the overlay of images and the intensity of the glass effect.

Overlay intensityoverlay_opacity

Default: 55 · Range: 0–100%

Power of blur glassglass_blur

Default: 18 · Range: 0–40px

Autoplay

Activate automatic scrolling and choose the display time for each slide.

Autoplayautoplay

Default: enabled

Duration of each slideautoplay_speed

This delay only applies when autoplay is enabled.

Default: 6 · Range: 3–12s

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme

Default: disabled

Paletteopaline_color_scheme

Default: scheme-1

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px

Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px

COMPOSITION

Available blocks

Slideslide

Limit: 10

Add this block only when it provides useful information to the journey.

Glass cardglass_card

Limit: 12

Add this block only when it provides useful information to the journey.

CHECKS

Before publishing

✓
Content remains readable in every color scheme.
✓
Labels match the storefront language.
✓
Displayed promotions match Shopify rules.
✓
Interactions remain accessible by keyboard and touch.