Section reference · Piéra & Émeraude

Slideshow

Create a hero with manual or timed slides, thumbnails and product discovery.

Source: theme/sections/slideshow.liquid

Where to find it

In the theme editor, open the appropriate template and use Add section.

Unavailable in: header, footer section groups.

Images & video

Desktop 16:9, 2560 × 1440 (3840 × 2160 preferred large). Mobile 9:16, 1440 × 2560. Thumbnail: portrait 5:7, recommended 400 × 560 px; keep the subject recognizable.

Sizes are recommended source minimums, not upload restrictions. Prepare and crop media.

Set it up

  1. Choose Editorial signature layout for text beside the image and manual chapter navigation. Leave it off for the full-width hero.
  2. Full-width: set Slide navigation to Thumbnails with progress. A Slide’s Thumbnail falls back to Mobile image, then Image.
  3. Product card shows a selected product with price on desktop in the full-width layout; set its horizontal position. Each slide also supports two product hotspots with independent mobile coordinates.
  4. Use first slide heading as the page heading only when this is the opening content section. Test Wide screens → Show the whole image if fill mode crops the photograph too much.

Read the step-by-step guide →

Section settings

Names match the English theme editor. The installed preset may override schema defaults. A conditional field appears only when its related control is enabled.

Editorial signature layout

editorial_signature

Schema default: false. Presets can override it.

Places slideshow text beside imagery and uses manual chapter navigation.

Editor note: Text beside imagery with chapter navigation. Manual navigation only; autoplay is disabled in this layout.

Recommended: Choose for an editorial opening; autoplay, floating product cards and full-width hotspots are not available in this layout.

Color scheme

color_scheme

Schema default: scheme-2. Presets can override it.

Applies a coordinated set of background, text, accent and button colors.

Recommended: Start with the preset scheme. Check contrast after changing colors or photography.

Keep this section still

still

Schema default: false. Presets can override it.

Disables animation for this section only.

Editor note: Turns off the animations of this section only. The switch for the whole theme is in Theme settings, Motion.

Recommended: Enable for a calm chapter or to isolate a motion issue. Global motion and visitor reduced-motion preferences also apply.

Heading size

heading_scale

Schema default: 100%. Presets can override it.

Range: 70–120%; step 5.

Adjusts heading size within the range shown.

Recommended: Start at 100%; check the smallest and widest layouts before increasing it.

Use first slide heading as the page heading

first_slide_heading_as_h1

Schema default: false. Presets can override it.

Turns “Use first slide heading as the page heading” on or off.

Recommended: Start with the preset choice. Enable only when the relevant content or store feature is configured, then preview the result.

Accessibility label

accessibility_label

Schema default: Featured stories. Presets can override it.

Sets the visible accessibility label.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Wide screens

wide_screen_fit

Schema default: Fill the screen. Presets can override it.

Choices: Fill the screen · Show the whole image.

Chooses whether the full-width hero fills the screen or shows the whole image.

Editor note: Full-width layout. “Show the whole image” keeps narrower photographs uncropped and unenlarged on wide screens.

Recommended: Use Show the whole image to protect a narrow photograph on wide displays; inspect the framing.

Slide navigation

navigation

Schema default: Arrows. Presets can override it.

Choices: Arrows · Thumbnails with progress.

Chooses arrow controls or thumbnail navigation for the full-width slideshow.

Editor note: Full-width layout. Thumbnails show each slide as a small image in the corner; with autoplay a ring shows the time to the next slide.

Recommended: Choose Thumbnails with progress when image navigation helps. The progress ring uses autoplay timing.

Enable autoplay

autoplay

Schema default: false. Presets can override it.

Turns “Enable autoplay” on or off.

Recommended: Start with the preset choice. Enable only when the relevant content or store feature is configured, then preview the result.

Change slides every

change_slides_speed

Schema default: 6s. Presets can override it.

Range: 3–10s; step 1.

Conditional in the editor: {{ section.settings.autoplay }}

Adjusts change slides every within the range shown.

Recommended: Start at 6s; check the smallest and widest layouts before increasing it.

Blocks

Add and reorder supported blocks within this section. Settings below apply to each block instance.

Slide

Maximum of this block type: 8.

Image

image

No schema default; the installed preset may supply a value.

Supplies image for this section or block.

Recommended: Use the image dimensions on this page; choose a focal point where supported and inspect the actual crop. Leave optional images blank when they add no value.

Mobile image

mobile_image

No schema default; the installed preset may supply a value.

Supplies mobile image for this section or block.

Recommended: Use the image dimensions on this page; choose a focal point where supported and inspect the actual crop. Leave optional images blank when they add no value.

Thumbnail

thumbnail

No schema default; the installed preset may supply a value.

Provides the small image for thumbnail slide navigation.

Editor note: Thumbnail navigation only. Defaults to the mobile image or the image.

Recommended: Use a recognizable crop. If blank, Mobile image is used before Image.

Product card

card_product

No schema default; the installed preset may supply a value.

Shows a floating product-and-price card in the full-width slideshow on desktop.

Editor note: Full-width layout, desktop. Shows the product as a small floating card with price.

Recommended: Choose a product visible in the photograph; this card is not shown on mobile or in Editorial signature layout.

Product card horizontal position

card_x

Schema default: 30%. Presets can override it.

Range: 5–80%; step 1.

Positions the marker or card horizontally from the left as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Image position

image_position

Schema default: Focal point. Presets can override it.

Choices: Focal point · Top · Center · Bottom.

Chooses the image position behavior or layout from the listed options.

Editor note: Where the image is anchored when it is cropped. “Focal point” uses the point set on the image.

Recommended: Start with the preset choice. Compare the available modes in desktop and mobile previews.

Editorial demo study

demo_study

Schema default: Automatic. Presets can override it.

Choices: Automatic · Material crop · Collar detail · Complete silhouette.

Chooses the editorial demo study behavior or layout from the listed options.

Editor note: Used only in the editorial layout when no image is selected.

Recommended: Start with the preset choice. Compare the available modes in desktop and mobile previews.

Overlay opacity

overlay_opacity

Schema default: 25%. Presets can override it.

Range: 0–70%; step 5.

Adjusts overlay opacity within the range shown.

Recommended: Start at 25%; check the smallest and widest layouts before increasing it.

Content position

content_position

Schema default: Bottom left. Presets can override it.

Choices: Top left · Center left · Center · Bottom left · Bottom right.

Chooses the content position behavior or layout from the listed options.

Recommended: Start with the preset choice. Compare the available modes in desktop and mobile previews.

Eyebrow

eyebrow

Schema default: New perspective. Presets can override it.

Sets the visible eyebrow.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Heading

heading

Schema default: Create a strong first impression.. Presets can override it.

Sets the visible heading with inline emphasis.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Text

text

Schema default: Pair focused copy with campaign imagery to guide customers toward your most important story.. Presets can override it.

Sets the visible text with rich-text formatting.

Recommended: Replace demonstration copy with concise, accurate store content. Avoid unsupported claims and translate it for active languages.

Button label

button_label

Schema default: Explore the collection. Presets can override it.

Sets the visible button label.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Button link

button_link

No schema default; the installed preset may supply a value.

Sets the destination for button link.

Recommended: Use the resource picker for internal links. Preview the destination and provide matching link text.

Product hotspots

Full-width layout only. A hotspot appears once a product is selected. Positions are percentages of the image; mobile positions apply to the mobile image.

Hotspot 1 product

hotspot_1_product

No schema default; the installed preset may supply a value.

Connects a Shopify product as the content source.

Recommended: Select the real store resource. Confirm it is available to the storefront; a theme ZIP does not create it.

Hotspot 1 horizontal position

hotspot_1_x

Schema default: 40%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card horizontally from the left as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Hotspot 1 vertical position

hotspot_1_y

Schema default: 40%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card vertically from the top as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Hotspot 1 mobile horizontal position

hotspot_1_mobile_x

Schema default: 40%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card horizontally from the left as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Hotspot 1 mobile vertical position

hotspot_1_mobile_y

Schema default: 40%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card vertically from the top as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Hotspot 2 product

hotspot_2_product

No schema default; the installed preset may supply a value.

Connects a Shopify product as the content source.

Recommended: Select the real store resource. Confirm it is available to the storefront; a theme ZIP does not create it.

Hotspot 2 horizontal position

hotspot_2_x

Schema default: 60%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card horizontally from the left as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Hotspot 2 vertical position

hotspot_2_y

Schema default: 55%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card vertically from the top as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Hotspot 2 mobile horizontal position

hotspot_2_mobile_x

Schema default: 60%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card horizontally from the left as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

Hotspot 2 mobile vertical position

hotspot_2_mobile_y

Schema default: 55%. Presets can override it.

Range: 0–100%; step 1.

Positions the marker or card vertically from the top as a percentage of the image.

Recommended: Place it on the actual piece or detail; inspect both screen sizes. Only fields labelled mobile have independent mobile coordinates.

← All sections · Theme settings · Get support