Skip to main content

Image compare

The Image compare section lets customers interactively slide between two images—perfect for showing before-and-after shots, product variations, or design changes in a visual and engaging way.


Settings

SettingDescription
Color schemeSelect a predefined color scheme.
PreludeSee shared settings > Prelude. Associated settings below.
Aspect ratioControl the aspect ratio of images on both image comparisons.
Image display widthChoose whether the images stay within the theme's normal padding or extends beyond it for a more immersive layout. Extended allows the image to break out of the usual bounds, while within bounds keeps it aligned with the page content.
Starting reveal amountChoose how much of the left or right image is revealed without user interaction.
Reveal content thresholdEach compare image content shows when a specific amount of that side has been revealed. This setting controls the amount needed to be visible to show the content. Show initial content without interaction by setting the 'Starting reveal amount' higher than the threshold.
Section spacing & borderSee shared settings > Section spacing & border. Associated settings below.
Section animationsAnimate section when scrolled into view.

Image compare section settings being shown


Shared settings

These settings are common to several sections and work the same way wherever they appear. Once you learn how they work in one place, you'll recognize them elsewhere.

Prelude

Use Prelude content to introduce your section. These settings allow you to add a heading, supporting text, and optional call-to-action buttons to introduce the section. Some sections may hide button settings if they aren’t relevant to the layout.

SettingDescription
AlignmentSet the horizontal alignment of the prelude content.
Heading + Associated settingsCustomize the section heading. Choose between your theme’s body or heading font, adjust the font size, and optionally display the text in all caps for extra emphasis.
Text + Associated settingsCustomize the text, and size of your text to match your design.
Button + Associated settingsCustomize the button label, add a button link, adjust the button size, and pick the button style.
Visual example.

Showing section height settings in action

Spacing and border

The section Spacing & Border settings allow you to control how much vertical space line between your sections. Mix and match to find what works for you. Show a stylistic border between sections to emphasize the break between content.

SettingDescription
Top spacingHow much spacing applies to the top of this section.
Bottom spacingHow much spacing applies to the bottom of this section.
Show bottom borderShow a stylistic border at the bottom of the section spacing
Visual example.

Showing section height settings in action

Block - Left / Right compare

Settings are identical for the Left and Right compare blocks.

SettingDescription
Color schemeSelect a predefined color scheme.
ImageSet your comparison image.
Image overlay opacityAdds a semi-transparent overlay on top of the image using the selected scheme background. Use this to improve text readability.
Vertical content alignmentControl how your nested content block align vertically within the comparison image.

Using the Logos grid's text block