Comparison gallery

How to add a Comparison gallery section to your Shopify store
How to customize a Comparison gallery section
Last updated

Showcase before-and-after or product differences in a customizable layout to help customers compare and choose easily.
In the theme editor (Customize), click Add section.
Select Comparison gallery section.
Make necessary changes.
Save.
This section includes two main blocks: Header and Product.

The Header block lets you introduce the section with titles, text, images, or buttons. Use it to create a strong opening and guide customers through the comparison.
Alignment
Set the header alignment: left, center, or right.
Devices
Switch between desktop and mobile padding settings.
Bottom
Adjust the spacing below the header.
Subheading
Provide supporting text above or below the heading

Heading
Add a main title

Heading β Add a main title
Subheading β Provide supporting text above or below the heading
Text β Include additional descriptions or details
Image β Display an image or icon
Button β Add a call-to-action
Learn more: Basic

The Product block displays individual items with customizable content such as image comparison, product title, features, and call-to-action, helping highlight key benefits and differences.
Product
Showcase product

Image comparison
Display before & after images with an interactive slider. Learn more: Image comparison

Product title
Show the product name

Button
Add a call-to-action

Learn more: Basic
Last updated