Pebble Theme
Pebble Theme
Theme Sections

Comparison gallery

2 min read
image

Showcase before-and-after or product differences in a customizable layout to help customers compare and choose easily.

  1. In the theme editor (Customize), click Add section.
  2. Select Comparison gallery section.
  3. Make necessary changes.
  4. Save.

This section includes two main blocks: Header and Product.

image

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.

SettingDescription
AlignmentSet the header alignment: left, center, or right.
DevicesSwitch between desktop and mobile padding settings.
BottomAdjust the spacing below the header.
BlockDescriptionExample
SubheadingProvide supporting text above or below the headingimage
HeadingAdd a main titleimage

📦 Nested dynamic blocks

  • 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
image

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.

BlockDescriptionExample
ProductShowcase productimage
Image comparison
Display before & after images with an interactive slider. Learn more: theme-blocks/basic#image-comparison		image
Product titleShow the product nameimage
Icon listHighlight key features with icons. Learn more: theme-blocks/basic#icon-listimage
ButtonAdd a call-to-actionimage
Learn more: Basic
Last updated

Collection tabs

Previous Page

Comparison table

Next Page

ON THIS PAGE

How to add a Comparison gallery section to your Shopify storeHow to customize a Comparison gallery section

Was this helpful?