Aumenta le tue vendite, trasforma il tuo negozio con Concept. Provalo gratuitamente adesso

Compare products

How to Set Up Product Comparison in Concept

The Product Comparison section helps merchants display product information, specifications, and feature differences in a clean comparison table layout.

This section is useful when customers need to compare products based on details such as:

  • Features
  • Specifications
  • Compatibility
  • Materials
  • Performance
  • Availability

It is especially helpful for stores selling technical, configurable, or feature-rich products.

STEPS:

1. Add the Product Comparison Section

First, add the Product Comparison section to the template where you want the comparison table to appear.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open the page template where you want to display the comparison table.
  4. Click Add section.
  5. Select Product comparison.
  6. Move the section to the position where you want it to appear.
  7. Click Save.

Recommended placement:

Page type Recommended position
Product page Below the main product information or product details section
Landing page After the product introduction or benefits section
Collection landing page Near the product recommendation area
Custom page Anywhere customers need to compare product options

Important:

  • The Product Comparison section is configured manually in the theme editor.
  • The products must already exist in Shopify admin before you can select them in the section.
  • Product information such as image, title, vendor, price, and URL is pulled from the selected Shopify products.
  • Comparison headings and values are entered manually inside the Product blocks.
2. Configure the Main Section Settings

After adding the section, configure the main Product Comparison settings.

Setting Purpose
Highlight differences Shows a storefront toggle that lets customers highlight rows where the visible product values are different.
Enable sticky product info Keeps the product information row visible while customers scroll through a long comparison table.
Select the first available variant Uses the first available variant for products with variants. This can also display the variant title and variant media.
Show vendor Displays the product vendor above the product title.
Show price Displays the product price below the product title.
Heading Adds the main heading for the section.
Heading size Controls the size of the section heading.
Heading alignment Controls the alignment of the section heading.
Subheading Adds a small text label above or near the heading, depending on the theme style.
Description Adds supporting text below the heading.
Button label Adds an optional button in the section heading area. Leave blank to hide the button.
Button link Sets the link for the optional heading button.
Open link in new tab Opens the optional heading button link in a new browser tab.
Show button icon Shows an icon inside the optional heading button.
Highlighted text Applies a highlight style to italic text in the heading.
Colors Controls section text, background, highlight, and button colors.
Padding top / Padding bottom Controls the vertical spacing of the section.
Divider Adds a divider line to separate this section from nearby content.
Full width Makes the comparison table use the full page width.
Rounded Applies rounded section styling when supported by the theme style.

Recommended setup:

Setting Value
Highlight differences Enabled
Enable sticky product info Enabled
Select the first available variant Enabled
Show vendor Optional
Show price Enabled
Heading Product comparison or Compare our products
Heading size Medium or Large
Heading alignment Center
Full width Enabled

Important:

When Highlight differences is enabled, customers can use the Highlight differences toggle on the storefront. Rows with different values across the currently visible products will be highlighted.

For the best result, use consistent row headings and values across all Product blocks.

3. Add Product Blocks

Inside the Product Comparison section, add a Product block for each product you want to compare.

Each Product block represents one product option in the comparison table.

  1. In the Product Comparison section, click Add block.
  2. Select Product.
  3. In the Product setting, choose the Shopify product you want to compare.
  4. Add the comparison headings and values for that product.
  5. Repeat the same steps for each product you want to include.
  6. Click Save.
docs__concept__compare-products__07.webp

Example product blocks:

Block Product
Product block 1 Product A
Product block 2 Product B
Product block 3 Product C
Product block 4 Product D

Important:

  • The storefront displays up to 3 product columns at the same time.
  • If you add 1 to 3 Product blocks, the selected products display directly as comparison columns.
  • If you add more than 3 Product blocks, the section displays dropdown selectors so customers can choose which products to compare in each column.
  • Each selected product appears at the top of its comparison column.
4. Select Featured Products for Each Column

Inside every Product block, select the product that should be used for that comparison option.

The selected product will appear at the top of the comparison column with its product image, title, vendor, price, and action button, depending on the section settings.

Select Product for Column

You can configure a different product for each Product block.

Product Position Settings

Product information shown in the comparison header can include:

  • Product image
  • Product title
  • Product vendor, if Show vendor is enabled
  • Product price, if Show price is enabled
  • First available variant title, if Select the first available variant is enabled and the product has variants
  • Product link
  • Add to cart or View product action

Important:

  • Product image, title, vendor, price, variant information, and URL are pulled from the selected Shopify product.
  • Comparison values are not automatically pulled from product metafields.
  • You need to enter comparison headings and values manually in each Product block.
5. Understand the 3-Column Comparison Layout

The Product Comparison section is designed around a 3-column layout.

  • Each visible column represents one product.
  • Up to 3 products can be displayed side-by-side at one time.
  • If more than 3 Product blocks are added, customers can use the dropdown selectors to choose which products to compare.
Comparison Table Structure

Expected behavior:

Setup Storefront behavior
1 Product block One product column displays.
2 Product blocks Two product columns display.
3 Product blocks Three product columns display.
More than 3 Product blocks Three columns display, and dropdown selectors allow customers to switch products.

Important:

  • The section can include more than 3 Product blocks, but only 3 products are visible at the same time.
  • When dropdown selectors are available, changing a product updates the product information, comparison values, and product action button without reloading the page.
  • The comparison table is horizontally scrollable when needed, especially on smaller screens.
6. Add Comparison Headings and Values

Each Product block includes heading fields and value fields.

There are up to 25 heading and value pairs available for creating comparison rows.

Field Purpose
Heading 1 to Heading 25 Defines the comparison row label, such as Charging time, Battery life, or Material.
Value 1 to Value 25 Defines the value for the selected product in that row.
Text size Controls the text size for the comparison values in that Product block.

Example setup:

Row Heading Product 1 value Product 2 value Product 3 value
1 Display size 13 inch 15 inch 17 inch
2 Battery life 10 hours 14 hours 12 hours
3 Waterproof TRUE TRUE FALSE
4 Charging time 2 hours 1.5 hours 2.5 hours
5 Material Aluminum Aluminum Plastic

The heading from the first Product block is very important because it defines the structure of the comparison table.

Recommended structure:

Product block Heading setup
First Product block Add all row headings you want to display.
Other Product blocks Use the same heading numbers and enter matching values.

Example:

Field Product block 1 Product block 2 Product block 3
Heading 1 Battery life Battery life Battery life
Value 1 10 hours 14 hours 12 hours
Heading 2 Waterproof Waterproof Waterproof
Value 2 TRUE TRUE FALSE

Important:

  • The first Product block controls which comparison rows are displayed.
  • If a heading field is empty in the first Product block, that row will not display, even if other Product blocks have values for the same row number.
  • Keep the same heading numbers across all Product blocks so the values line up correctly.
  • If a value is left blank, the storefront displays a dash —.
7. Create Large Section Headings Using Markdown

You can use Markdown-style heading syntax inside the heading field to create large section headings in the comparison table.

This is useful for grouping specifications into sections such as:

  • Display
  • Sound
  • Battery
  • Connectivity
  • Dimensions

Structure

Enter four hash symbols before the heading text:

#### Display

Using this format creates a large heading row with an underline separator inside the comparison table.

Markdown Heading Example

Recommended setup:

Field Value
Heading 1 #### Display
Value 1 Leave blank
Heading 2 Screen size
Value 2 13 inch
Heading 3 Resolution
Value 3 2560 × 1600
Heading 4 #### Battery
Value 4 Leave blank
Heading 5 Battery life
Value 5 10 hours

Important:

  • Add the #### section heading in the first Product block.
  • Use the #### format in the heading field only.
  • Leave the matching value field blank if you only want to show the section title.
  • After a large section heading, continue adding normal comparison rows in the next heading and value fields.
8. Add Normal Sub Headings

If the heading field does not include the #### syntax, it displays as a normal comparison row label.

Example normal headings:

Charging time

Battery life

Battery size

This creates standard specification rows inside the comparison table.

Example:

Heading Product 1 value Product 2 value Product 3 value
Charging time 2 hours 1.5 hours 2.5 hours
Battery life 10 hours 14 hours 12 hours
Battery size 4000 mAh 5000 mAh 4500 mAh

Important:

  • Use normal headings for regular specification rows.
  • Use the same row heading across Product blocks for easier comparison.
  • Keep headings short so the table remains easy to read on smaller screens.
9. Use TRUE and FALSE Values for Icons

Inside the Value field, you can enter true or false to display visual icons in the comparison table.

Value entered Storefront result
true Check icon
false Close icon
True False Icons

Example:

Heading Product 1 value Product 2 value Product 3 value
Waterproof true true false
Wireless charging false true true
Includes case true false false

Important:

  • Enter only true or false if you want the icon to appear.
  • The value is not case-sensitive, so true, True, and TRUE can all work.
  • If you enter normal text, the text will display as entered.
  • If the value field is empty, the storefront displays a dash —.
10. Preview the Product Comparison Section

After completing the setup, open the page on your storefront and test the section.

Check the following:

  • The selected products display correctly.
  • Product images, titles, vendors, and prices appear as expected.
  • The comparison rows display in the correct order.
  • The same row headings are used consistently across Product blocks.
  • true and false values are converted into icons.
  • Blank values display as a dash —.
  • The Highlight differences toggle works correctly, if enabled.
  • The sticky product information row appears while scrolling, if enabled.
  • Product dropdown selectors appear when more than 3 Product blocks are added.
  • The product action buttons link or add the correct products.
  • The section remains usable on mobile.

Expected behavior:

Setup Storefront behavior
1 to 3 Product blocks Products display directly as comparison columns.
More than 3 Product blocks Three columns display, with dropdown selectors to choose products.
Highlight differences enabled Customers can highlight rows with different values.
Sticky product info enabled Product information remains visible while scrolling through the table.
true value Check icon displays.
false value Close icon displays.
Blank value Dash — displays.
11. Notes and Limitations

Please note the following behavior:

  • The Product Comparison section is available in Concept since Version 5.0.0.
  • The section is configured manually in the theme editor.
  • Product image, title, vendor, price, variant, and URL are pulled from the selected Shopify products.
  • Comparison headings and values are entered manually in each Product block.
  • The section supports up to 25 comparison rows.
  • The first Product block controls which rows are displayed.
  • If a heading is blank in the first Product block, that row will be hidden.
  • The storefront displays up to 3 comparison columns at one time.
  • If more than 3 Product blocks are added, customers can use dropdown selectors to choose which products to compare.
  • true and false values are converted into icons.
  • Blank values are displayed as a dash —.
  • Large section headings can be created by adding #### before the heading text in the first Product block.
  • The Highlight differences feature compares the currently visible columns only.
  • The product action area can show an Add to cart button when a usable variant is available. Otherwise, it can show a View product button.
  • The section is not designed to automatically generate comparison rows from product metafields.

Troubleshooting

If the Product Comparison section does not display correctly, please check the following:

  • Make sure the Product Comparison section has been added to the correct template.
  • Make sure at least one Product block has been added.
  • Make sure each Product block has a product selected.
  • Make sure the first Product block contains the row headings you want to display.
  • If a row is missing, check whether the matching heading field is blank in the first Product block.
  • If values appear under the wrong row, make sure the same heading numbers are used across all Product blocks.
  • If check or close icons do not appear, make sure the value is only true or false.
  • If a blank field shows a dash, this is expected behavior.
  • If large section headings do not appear, make sure the heading starts with #### in the first Product block.
  • If dropdown selectors do not appear, make sure more than 3 Product blocks have been added.
  • If the sticky product information row does not appear, make sure Enable sticky product info is enabled and the table is long enough to scroll.
  • If difference highlighting does not work, make sure Highlight differences is enabled and then turn on the storefront toggle.
  • If the wrong rows are highlighted, make sure each Product block uses consistent row headings and values.
  • If product images or prices are incorrect, check the selected product setup in Shopify admin.
  • If the Add to cart button does not appear, check the product variant setup and the Select the first available variant setting.
  • If the section is difficult to use on mobile, reduce the number of rows or shorten the comparison values.
  • Clear your browser cache and refresh the storefront.
  • Make sure you are using the latest version of the Concept theme.

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.

Supporto di livello mondiale

Approfitta del nostro servizio clienti a 5 stelle per un'esperienza di acquisto senza interruzioni. Nessun tempo di attesa, nessuna seccatura, solo l'aiuto di esperti.

Aggiornamenti gratuiti a vita

Il tuo negozio riceverà aggiornamenti gratuiti e regolari, compatibili con gli standard e le tendenze del settore, per tutta la vita.

Design che vende qualsiasi cosa

È facile creare un negozio online e iniziare subito a vendere i tuoi prodotti.

Testato e approvato per la velocità

Soddisfa gli standard prestazionali di Shopify, garantendo un'esperienza di acquisto più rapida per i tuoi acquirenti.
© 2026 RoarTheme - Premium Shopify Themes, Apps and Services. 
Powered by Shopify