Compare products section
Compare products section.
The same section in the three themes:
Where to find it: In the theme editor, choose Add section on any template, then pick Compare products.
The heading area is a static block named Section header. Select it in the section sidebar to edit the eyebrow, heading, text and buttons, or to restyle or reorder them.
When you add this section, it starts from the Compare products preset.
Settings
Section titled “Settings”Add two to four products, then a row for each detail to compare. A row can show a product metafield, such as custom.material.
| Setting | Type | Default | Options | Notes |
|---|---|---|---|---|
| Table name | Text | Product comparison | Read out by screen readers. | |
| Image ratio | Select | Square (1:1) | Portrait (4:5), Square (1:1), Landscape (4:3) | |
| Show the Only differences switch | Checkbox | On |
Section style
Section titled “Section style”| Setting | Type | Default | Options | Notes |
|---|---|---|---|---|
| Color scheme | Color scheme | Scheme 1 | ||
| Layout width | Select | Page width | Page width, Full width | |
| Animation on scroll | Select | Theme default | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in | |
| Top padding | Slider | 80 px | 0 to 200 px, step 8 | |
| Bottom padding | Slider | 80 px | 0 to 200 px, step 8 |
Blocks
Section titled “Blocks”Add, reorder, duplicate or remove these blocks in the section sidebar: Section header, Product, Row.
This section holds up to 20 blocks.
Section header block settings
Section titled “Section header block settings”| Setting | Type | Default | Options | Notes |
|---|---|---|---|---|
| Layout | Select | Stacked | Stacked, Split: content left, button right | |
| Alignment | Select | Left | Left, Center, Right | Shown when Layout is Stacked. |
| Max width | Select | None | None, Narrow, Normal | |
| Gap | Slider | 12 px | 0 to 64 px, step 4 | |
| Space below | Slider | 48 px | 0 to 120 px, step 4 | |
| Animation on scroll | Select | None | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |
Product block settings
Section titled “Product block settings”| Setting | Type | Default | Options | Notes |
|---|---|---|---|---|
| Product | Product |
Row block settings
Section titled “Row block settings”| Setting | Type | Default | Options | Notes |
|---|---|---|---|---|
| Label | Text | Brand | ||
| Show | Select | Vendor | Price, Vendor, Product type, Availability, Option values, Metafield | |
| Option name | Text | For example Size. Leave empty to list every option. Shown when Show is Option values. | ||
| Metafield | Text | Namespace and key, for example custom.material. Find them in Settings > Custom data > Products. Shown when Show is Metafield. |