The Comparison section puts two photos in one frame, split by a line with a round handle. Customers drag the handle, or click anywhere on the photo, to show more of the left photo or the right one. Merchants also call it a before and after slider. To add one, click Add section in the editor and select Comparison. It works on any page.
The first photo is on the left and the second on the right. Each side can have a title and a short description in its bottom corner.
The preset comes without photos. Until you add them, each side shows a plain gray area.
Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Heading above centers the heading above the slider and puts Caption under it. Header beside the slider adds a column to the left of the slider, one third of the width, with a round seal badge at the top, the heading, then Caption and a button at the bottom. On screens narrower than 1,000 px, the column sits above the slider.
Heading
With Header beside the slider, bold text starts a new line.
Image ratio
The shape of the frame. Landscape is wide (16:9), Square is square, and Portrait is tall (4:5). Photos are cropped to fill it.
Slider start position
Where the handle sits when the page opens, from 0% to 100%. The default is 50%, the middle. At 0% only the second photo shows, and at 100% only the first.
Caption
A short paragraph under the slider, or in the header column with Header beside the slider.
Button label and Button link
A filled button under Caption. Leave the label empty to hide it. Shows with Header beside the slider.
Center text
A few characters in the middle of the seal badge. Shows with Header beside the slider.
Circular text
Text that runs around the edge of the seal from the top, repeated with a dot between copies. Shows with Header beside the slider. The badge hides when Center text and Circular text are both empty.
Content source
Custom uses the photos and text under Before side and After side. Products uses the main photo, the title and the start of the description of two products you choose under Products.
Before side and After side
These settings show when Content source is Custom. Before side is the left photo, and After side is the right one.
Setting
What it does
Image
The photo for this side.
Heading
A title in the bottom corner of the photo: the left corner for the before side, the right corner for the after side.
Description
A short paragraph under the title.
When a side has a title or a description, the bottom of its photo is shaded darker so the white text stays readable. On screens narrower than 768 px, the titles and descriptions move under the photo, in two columns.
Products
Before product and After product pick the two products. They are used when Content source is Products. Each side shows the product's main photo, its title, and the first 140 characters of its description.
The Comparison section puts two photos in one frame, split by a line with a round handle. Customers drag the handle, or click anywhere on the photo, to show more of the left photo or the right one. Merchants also call it a before and after slider. To add one, click Add section in the editor and select Comparison. It works on any page.
The first photo is on the left and the second on the right. Each side can have a title and a short description in its bottom corner.
The preset comes without photos. Until you add them, each side shows a plain gray area.
Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Background
The background settings are explained in Section background settings.
Content
Setting
What it does
Style
Heading above centers the heading above the slider and puts Caption under it. Header beside the slider adds a column to the left of the slider, one third of the width, with a round seal badge at the top, the heading, then Caption and a button at the bottom. On screens narrower than 1,000 px, the column sits above the slider.
Heading
With Header beside the slider, bold text starts a new line.
Image ratio
The shape of the frame. Landscape is wide (16:9), Square is square, and Portrait is tall (4:5). Photos are cropped to fill it.
Slider start position
Where the handle sits when the page opens, from 0% to 100%. The default is 50%, the middle. At 0% only the second photo shows, and at 100% only the first.
Caption
A short paragraph under the slider, or in the header column with Header beside the slider.
Button label and Button link
A filled button under Caption. Leave the label empty to hide it. Shows with Header beside the slider.
Center text
A few characters in the middle of the seal badge. Shows with Header beside the slider.
Circular text
Text that runs around the edge of the seal from the top, repeated with a dot between copies. Shows with Header beside the slider. The badge hides when Center text and Circular text are both empty.
Content source
Custom uses the photos and text under Before side and After side. Products uses the main photo, the title and the start of the description of two products you choose under Products.
Before side and After side
These settings show when Content source is Custom. Before side is the left photo, and After side is the right one.
Setting
What it does
Image
The photo for this side.
Heading
A title in the bottom corner of the photo: the left corner for the before side, the right corner for the after side.
Description
A short paragraph under the title.
When a side has a title or a description, the bottom of its photo is shaded darker so the white text stays readable. On screens narrower than 768 px, the titles and descriptions move under the photo, in two columns.
Products
Before product and After product pick the two products. They are used when Content source is Products. Each side shows the product's main photo, its title, and the first 140 characters of its description.
Motion
Dark moment, Rise on scroll and Chapter title are explained in Section motion settings.