Image Comparison Slider

Layout, content and available controls for Image Comparison Slider.

Scale Theme · v1.9.3 · 2 min read

Where to find it

Add this section from the theme editor on a supported template.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Kicker: Edit the text shown by this component.
Heading: Use bold or italic in this heading to apply the global Heading DNA accent style. Change it in Theme settings > Typography.
Accent effect: Highlight adds a slanted color plate behind bold or italic heading text. The existing accent color controls set its background.Options: Theme setting · Highlight
Heading accent color source: Global accent styling is managed in Theme settings > Typography; choose Custom for a local color.Options: Heading DNA · Custom
Custom accent colorConditional: Choose a local color when the relevant custom source is enabled.
Text: Edit the formatted text for this component.
Caption: Edit the text shown by this component.
Accessibility label: Edit the text shown by this component.
Before image: Choose an image from your shop. Preview its crop on desktop and mobile.
Before image URL fallback: Optional owned image URL. The image picker takes priority.
After image: Choose an image from your shop. Preview its crop on desktop and mobile.
After image URL fallback: Optional owned image URL. The image picker takes priority.
Image ratio: Choose the presentation or source that fits this component.Options: Square · Portrait · Wide · Landscape (6:5)
Starter image collection: Uploaded images take priority. Included photo roles compare product views; they are not proof of before/after results.Options: None · Skincare · Supplement · Matcha · Pet supplement · Shapewear · LED mask · Vacuum
First included photoConditional: Choose the presentation or source that fits this component.Options: Hero · Detail · Lifestyle · Portrait · Product listing
Second included photoConditional: Choose the presentation or source that fits this component.Options: Hero · Detail · Lifestyle · Portrait · Product listing
Maximum image width: Adjust within the range offered by the theme editor.
Maximum image height: Adjust within the range offered by the theme editor.
Mobile maximum image width: Adjust within the range offered by the theme editor.
Mobile maximum image height: Adjust within the range offered by the theme editor.
Before label: Edit the text shown by this component.
After label: Edit the text shown by this component.
Label backgroundConditional: Choose a local color when the relevant custom source is enabled.
Label textConditional: Choose a local color when the relevant custom source is enabled.
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
Saved color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
Handle and labelsConditional: Choose a local color when the relevant custom source is enabled.
Image borderConditional: Choose a local color when the relevant custom source is enabled.
Handle icon and label textConditional: Choose a local color when the relevant custom source is enabled.
Handle colorConditional: Choose a local color when the relevant custom source is enabled.
Handle iconConditional: Choose a local color when the relevant custom source is enabled.
Presentation: Choose the presentation or source that fits this component.Options: Theme · Reference split comparison
Use included comparison photograph: Used only when both the relevant image picker and URL are empty.
Heading sizeConditional: Adjust within the range offered by the theme editor.
Column gapConditional: Adjust within the range offered by the theme editor.
Vertical spacingConditional: Adjust within the range offered by the theme editor.
Heading gradient endConditional: Choose a local color when the relevant custom source is enabled.
Label backgroundConditional: Choose a local color when the relevant custom source is enabled.
Label textConditional: Choose a local color when the relevant custom source is enabled.