The Product comparison section lets customers compare products side by side, including their specifications, features, prices, and product details. You can add multiple Product blocks; the storefront displays up to 3 products at a time, with product selectors when more than 3 blocks are configured. Each block supports 25 Heading / Value pairs.
Demo usage
See Compare products – Concept Demo. In the Concept 6.1.0 page.compare.json template, Product comparison is enabled with 11 Product blocks. Customers can switch between products using the selectors above the comparison columns. The separate Comparison table section is configured in the same template but disabled.
Steps:
Add the Product comparison section
- In Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
- Open the page or template where you want the comparison to appear.
- Click Add section and select Product comparison.
- Position the section and click Save.
Add products to compare
- Under Product comparison, click Add block and select Product.
- Open the block and choose a Shopify Product.
- Repeat to include other products, then arrange the blocks in your preferred order.
- 1–3 Product blocks: The products appear directly in the comparison columns.
- More than 3 Product blocks: Three columns remain visible, with Choose a product dropdowns that let customers switch products.
- Click Save.
Enter comparison headings and values
- Open the first Product block and fill in Heading 1–25 with specification labels such as Battery life, Charging time, or Bluetooth version.
- Enter the matching specifications in Value 1–25. For example, Heading 1: Battery life and Value 1: Up to 30 hours.
- Repeat the values in the other Product blocks, using the same numbered positions for corresponding specifications.
- Adjust the Text size setting in each Product block as needed.
- Important: The headings in the first Product block determine which rows are shown. A row with an empty heading in the first block is hidden, even if other blocks contain values in that position.
- Comparison values are entered per block; they are not automatically generated from each product's specifications.
Create specification groups and yes/no icons
- To create a full-width group heading, enter
#### Batteryor#### Soundin a Heading field of the first Product block. - For a group heading without a specification row beneath it, leave its corresponding Value field empty. Continue with normal headings in the following numbered fields.
- To display a check icon, enter
TRUEas a value. EnterFALSEto display a cross icon. These values are case-insensitive. - Use consistent headings and values across products so the comparison is easy to read.
- Click Save.
Configure product details and comparison behavior
- Enable Highlight differences to show a storefront toggle that highlights differences between the currently displayed products.
- Enable Enable sticky product info to keep product information visible while customers scroll through a long comparison.
- Enable Select the first available variant to use the first available variant where applicable, including its title, image, and price when available.
- Use Show vendor and Show price to control which product details appear above the comparison rows.
- Product titles and images link to their product pages. Depending on the selected product and available variant, the section provides Add to cart or View product actions.
- Preview the table on desktop and mobile; on smaller screens, customers may need to scroll horizontally to see the columns.
Customize the heading and design
- Enter the section Heading, optional Subheading, and Description.
- Adjust Heading size, Heading alignment, and Heading tag.
- Optionally add a Button label and Button link, with external-link and button-icon settings.
- Choose a Highlighted text style and optional reveal effect.
- Under Colors, adjust text, background, highlight, and button colors or gradients.
- Under Section, configure top/bottom padding, divider, full-width display, and rounded corners.
- Click Save.
Product comparison vs. Comparison table
| Section | Main difference |
|---|---|
| Product comparison | Uses individual Product blocks, each with its own headings and values. Displays up to 3 products at once and provides dropdown selectors when more are added. Supports Highlight differences. |
| Comparison table | Uses one Headings column and up to 3 Values column blocks for a fixed comparison layout. |
Theme updates
- Concept 6.0.2 (August 25, 2026): Fixed the sticky comparison header animation so it stays in sync with the navigation.
- Concept 5.3.3 (May 8, 2026): Fixed unit-price measurement translations in comparison tables.
- Concept 5.0.0 (September 9, 2025): Introduced the Product Comparison section.
See the official Concept release notes.
Troubleshooting
- A comparison row is missing: Check its Heading in the first Product block. Empty headings there hide the row.
- Values appear under the wrong headings: Use matching Heading / Value numbers in every Product block.
-
Group headings do not appear: Start the heading with
####in the first Product block. - Check/cross icons do not appear: Enter TRUE or FALSE without other text in the Value field.
- Product selectors are missing: Add more than 3 Product blocks with selected products.
- Highlight differences is not working: Enable it in section settings and turn on the toggle on the storefront.
- Product information does not stick: Enable Enable sticky product info and check the section while scrolling.
- Product details or purchase actions look incorrect: Check the product selection and variant availability in Shopify admin.
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Comparison Table Section in Concept
How to Set Up the Maps Section in Concept