Comparison slider

Placement and available controls for the Comparison slider block.

Scale Theme · v1.9.3 · 1 min read

Where to find it

Open the parent section and use Add block where this block is offered.

Editor controls

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

Image 1: Choose an image from your shop. Preview its crop on desktop and mobile.
Image 2: Choose an image from your shop. Preview its crop on desktop and mobile.
Direction: Choose the presentation or source that fits this component.Options: Horizontal · Vertical
Text on images: Enable or disable this option and preview the result.
Image 1Conditional: Edit the text shown by this component.
Image 2Conditional: Edit the text shown by this component.
PresetConditional: Choose the presentation or source that fits this component.Options: Default · Paragraph · Heading 1 · Heading 2 · Heading 3 · Heading 4 · Heading 5 · Heading 6
PositionConditional: Choose the presentation or source that fits this component.Options: Top · Bottom
PositionConditional: Choose the presentation or source that fits this component.Options: Left · Right
BackgroundConditional: Enable or disable this option and preview the result.
Background colorConditional: Choose a local color when the relevant custom source is enabled.
Corner radiusConditional: Adjust within the range offered by the theme editor.
Aspect ratio: Choose the presentation or source that fits this component.Options: Auto · Portrait · Square · Landscape
Desktop width: Choose the presentation or source that fits this component.Options: Fit · Fill · Custom
Custom widthConditional: Adjust within the range offered by the theme editor.
Mobile width: Choose the presentation or source that fits this component.Options: Fit · Fill · Custom
Custom widthConditional: Adjust within the range offered by the theme editor.
HeightConditional: Choose the presentation or source that fits this component.Options: Fit · Fill
Inherit color scheme: Enable or disable this option and preview the result.
Color schemeConditional: Choose an available Shopify color scheme.
Border: Choose the presentation or source that fits this component.Options: None · Solid
ThicknessConditional: Adjust within the range offered by the theme editor.
OpacityConditional: Adjust within the range offered by the theme editor.
Corner radius: Adjust within the range offered by the theme editor.
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.
Left: Adjust within the range offered by the theme editor.
Right: Adjust within the range offered by the theme editor.