The Product Comparison section helps you display multiple products side by side in a comparison table. It is useful when you want customers to compare product features, specifications, availability, prices, and other details before making a purchase decision.
In Concept, the section displays up to 3 product columns at a time. If you add more than 3 products, the theme automatically shows a product selector dropdown so customers can switch which product appears in each comparison column.
How to Set Up the Product Comparison Section in Concept
Steps:
Add the Product Comparison section
Open the theme editor and add the section to the page where you want the comparison table to appear.
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open the template where you want to display the comparison table.
- Click Add section.
- Select Product comparison.
- Move the section to the desired position on the page.
- Click Save.
Configure the section settings
After adding the section, open the Product comparison section settings.
The main section settings control how the comparison table behaves and how product information appears.
| Setting | Description |
|---|---|
| Highlight differences | Adds a toggle that lets customers highlight differences between products. |
| Sticky product info | Keeps the product information visible while customers scroll through the comparison rows. |
| First available variant | Uses the first available variant image, title, and price when a product has multiple variants. |
| Show vendor | Displays the product vendor above the product title. |
| Show price | Displays the product price in each product column. |
| Heading | Adds the main heading above the comparison table. |
| Subheading | Adds optional small text above the main heading. |
| Description | Adds optional text below the heading. |
| Button label | Adds an optional button near the section heading. |
| Button link | Sets the link for the optional heading button. |
You can also adjust the heading size, heading alignment, highlighted text style, colors, padding, divider, full width, and rounded section style.
Add product blocks
Each Product block represents one product that can appear in the comparison table.
To add products:
- Open the Product comparison section.
- Click Add block.
- Select Product.
- Choose a product in the Product setting.
- Repeat this process for each product you want to include.
- Click Save.
The first 3 product blocks are displayed as the default comparison columns.
If you add more than 3 product blocks, the theme displays a dropdown above each column. Customers can use the dropdown to switch between the products you added.
Add comparison rows
Inside each Product block, you can add comparison data using the Heading and Value fields.
Each product block includes up to 25 comparison rows.
| Field | Purpose |
|---|---|
| Heading | The label for the comparison row, such as Battery life, Material, Warranty, or Compatibility. |
| Value | The value shown for that product in the row. |
| Text size | Controls the text size for the values inside that product block. |
The Heading fields from the first Product block define the table structure. The theme uses those headings to decide which rows should appear across the entire comparison table.
For best results, fill in the same row positions across all product blocks.
Example structure:
| Row | Product 1 | Product 2 | Product 3 |
|---|---|---|---|
| Heading 1 / Value 1 | Battery life: 20 hours | Battery life: 24 hours | Battery life: 30 hours |
| Heading 2 / Value 2 | Charging time: 2 hours | Charging time: 1.5 hours | Charging time: 1 hour |
| Heading 3 / Value 3 | Waterproof: true | Waterproof: false | Waterproof: true |
Create grouped section headings
You can create larger grouped headings inside the comparison table by adding #### before a heading value.
Use this format in a Heading field:
#### Display
This creates a larger separator heading inside the table. It is useful for grouping related rows, such as:
- Display
- Sound
- Battery
- Connectivity
- Dimensions
To use a grouped heading cleanly, add the #### heading in the first Product block and leave the matching Value field empty.
After that, continue adding normal comparison rows below it.
Use true and false values
The Product Comparison section can automatically convert true and false values into visual icons.
Add one of these values inside a Value field:
true
false
When the storefront renders the comparison table, the theme changes these values into check and close icons.
This is useful for yes/no features such as:
- Wireless charging
- Waterproof
- Bluetooth support
- Included accessories
- Warranty included
Configure product actions
At the bottom of each comparison column, the section displays an action area.
Depending on the product and variant setup, customers can see:
- An Add to cart button
- A View product link
- A View product button when no variant is available
- A sold-out state when the product cannot be purchased
If the product has multiple variants and First available variant is enabled, the theme can show the first available variant information in the product card area.
The product title and image link to the product page, so customers can open the full product page for more details.
Preview and test the comparison table
After setting up the section, preview the page on your storefront.
Check the following:
- The section heading displays correctly.
- The selected products appear in the comparison columns.
- Vendor and price visibility match your section settings.
- Comparison rows appear in the correct order.
- Grouped headings display correctly if you use
####. -
trueandfalsevalues are converted into icons. - The dropdown appears when you add more than 3 product blocks.
- The Add to cart and View product actions work correctly.
- The table can be viewed properly on mobile.
Troubleshooting
If the Product Comparison section does not look correct, check the following:
- Make sure you have added at least one Product block.
- Make sure each Product block has a product selected.
- Make sure the first Product block has headings filled in for the rows you want to show.
- If a row does not appear, check whether the matching Heading field is empty in the first Product block.
- If a value is blank, the theme may display a dash instead.
- If the true/false icons do not appear, make sure the value is entered as
trueorfalseonly. - If the dropdown does not appear, make sure you have added more than 3 product blocks.
- If product prices do not show, make sure Show price is enabled.
- If vendor names do not show, make sure Show vendor is enabled.
- If the sticky header does not appear while scrolling, make sure Sticky product info is enabled.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
क्या मैं एक विकल्प के साथ एकाधिक छवियाँ संबद्ध कर सकता हूँ?
Setup Show On Model Feature