Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Comparison. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose Comparison columns and configure the matching column settings. Select a Product or provide its custom image and title.
- Add a Comparison row for each feature and give it a clear Feature label.
- For every active column in the row, choose Text, Check, Cross or Dash. Enter the text when using Text.
- Select Highlighted column and its label only when you want to emphasize a particular option.
- Use optional Side heading, Side text and Side button blocks for supporting explanation; verify the facts and any displayed prices.
Main settings to review
| Setting | Choices or control |
|---|---|
| Comparison columns | 2–4; step 1 |
| Product | Choose a product |
| Product | Choose a product |
| Highlighted column | None · Column 1 · Column 2 · Column 3 · Column 4 |
| Show product price | On / Off |
| Image ratio | Square · Landscape · Portrait |
Blocks and content
This section allows up to 20 direct blocks. Nested blocks have their own parent-specific choices and limits.
- Comparison row: configure this inside the section. Its available controls are listed below.
- Side heading: configure this inside the section. Its available controls are listed below.
- Side text: configure this inside the section. Its available controls are listed below.
- Side button: configure this inside the section. Its available controls are listed below.
Content and media
- Use a consistent image ratio across columns. Product prices are drawn from the selected product; custom descriptions and comparison facts must be maintained by you.
Check the mobile layout
- Preview the table at a narrow width and verify that all compared columns can be reached. Keep feature labels and values concise.
Common questions and fixes
- A row looks empty: configure a value type for each active comparison column.
- A product header differs from your custom title or photo: check whether the column is using a selected Product.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (44)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Layout / Content width | 60–100 %; step 5 | Default: 100. 100% uses the selected section width. |
| Layout / Image ratio | Square · Landscape · Portrait | Default: Square. |
| Layout / Corner radius | 0–32 px; step 2 | Default: 12. |
| Column 1 / Product | Choose a product | Default: Not set. |
| Column 1 / Custom image | Choose an image | Default: Not set. |
| Column 1 / Custom title | Text | Default: Essential. |
| Column 1 / Subtitle | Text | Default: A considered start. |
| Column 1 / Custom link | Choose or enter a link | Default: Not set. |
| Column 2 / Product | Choose a product | Default: Not set. |
| Column 2 / Custom image | Choose an image | Default: Not set. |
| Column 2 / Custom title | Text | Default: Signature. |
| Column 2 / Subtitle | Text | Default: Our most popular choice. |
| Column 2 / Custom link | Choose or enter a link | Default: Not set. |
| Column 3 / Product | Choose a product | Default: Not set. |
| Column 3 / Custom image | Choose an image | Default: Not set. |
| Column 3 / Custom title | Text | Default: Complete. |
| Column 3 / Subtitle | Text | Default: The full experience. |
| Column 4 / Product | Choose a product | Default: Not set. |
| Column 4 / Custom image | Choose an image | Default: Not set. |
| Column 4 / Custom title | Text | Default: Bespoke. |
| Column 4 / Subtitle | Text | Default: Tailored to you. |
| Column display / Show images | On / Off | Default: On. |
| Column display / Show product price | On / Off | Default: On. |
| Column display / Button label | Text | Default: View details. |
| Column display / Highlighted column | None · Column 1 · Column 2 · Column 3 · Column 4 | Default: Column 2. |
| Column display / Highlight label | Text | Default: Most popular. |
| Content / Heading | Text | Default: Compare your options. |
| Content / Description | Formatted text | Default: Help customers choose the option that suits them best.. |
| Content / Heading alignment | Left · Center · Right | Default: Center. |
| Content / Comparison columns | 2–4; step 1 | Default: 2. |
| Section / Color scheme | Choose a color scheme | Default: background. |
| Section / Top padding | 0–160 px; step 4 | Default: 64. |
| Section / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Section / Mobile padding top | 0–100 px; step 4 | Default: 40. |
| Section / Mobile padding bottom | 0–100 px; step 4 | Default: 40. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |
Comparison row block controls (9)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Feature | Text | Default: Feature. |
| Column 1 / Value type | Text · Check · Cross · Dash | Default: Text. |
| Column 1 / Text | Text | Default: Included. This control appears only when the relevant layout or related option is selected. |
| Column 2 / Value type | Text · Check · Cross · Dash | Default: Text. |
| Column 2 / Text | Text | Default: Included. This control appears only when the relevant layout or related option is selected. |
| Column 3 / Value type | Text · Check · Cross · Dash | Default: Text. |
| Column 3 / Text | Text | Default: Included. This control appears only when the relevant layout or related option is selected. |
| Column 4 / Value type | Text · Check · Cross · Dash | Default: Text. |
| Column 4 / Text | Text | Default: Included. This control appears only when the relevant layout or related option is selected. |
Side heading block controls (1)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Heading | Text | Default: A clearer choice. |
Side text block controls (1)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Text | Formatted text | Default: Explain the most important difference and help customers choose with confidence.. |
Side button block controls (3)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Button label | Text | Default: Learn more. |
| Link | Choose or enter a link | Default: Not set. |
| Style | Primary · Secondary | Default: Secondary. |