Product comparison page
The Product comparison page of Combine builds a side-by-side table of the products a customer ticks in the collection grid.
Applies to: Combine 4.2.0 and later. Added in: Combine 4.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Product comparison page shows the products a customer selects on a collection page side by side, in a table. It is the compare product template of Combine, with the Product comparison section. You choose the rows of the table; the customer chooses the products.
Where to find it: Online Store → Themes → Customize → template picker → Products → compare.
For a fixed table with products you pick, use the Product comparison section instead.
How customers compare products
- On a collection page, the customer turns on the Compare switch in the filtering and sorting bar. A checkbox appears on every product card.
- Each selected product goes to the compare bar at the bottom of the screen, up to 4 products ("2 of 4 selected").
- From 2 products, the Compare button of the bar opens the comparison page.
- On the comparison page, the customer can remove a product with its x, or go back to the collection.
The selection is saved in the customer's browser. It stays when the customer moves to another collection page or comes back later.
Setting up product comparison
Turn on comparing in the collection grid
In the theme editor, open Collections → Default collection and select the Product grid section. Under Filtering and sorting, turn on Enable comparing.
Open the compare template
In the template picker, select Products → compare. It contains the Product comparison section with the Vendor, Price and Product link rows.
Set up the table
Set the section heading, Show back button, Show table headings, Empty fields label and Media aspect ratio. Set the table colors under Table style.
Choose the rows
Select Add block to add rows (Description, Price, Vendor, Rating, Icons list, Dynamic text, Product link, Variants). Drag them into the order you want and rename each row in its Heading.
Test on the storefront
Open a collection page, turn on Compare, select 2 to 4 products and select Compare in the compare bar.
The compare button opens the product URL with ?view=compare. Keep the compare template with this name: when it is deleted or renamed, the button opens the normal product page.
Content
- Show back button adds a button above and below the table. It returns to the page the customer came from, or to the All products collection.
- Show table headings adds a first column with the name of every row (the Heading of each block).
- Empty fields label is the text shown in a cell when a product has no value for that row (default "-").
- Media aspect ratio sets the shape of the product images at the top of each column. Natural keeps each image's own shape.
Table style
- Custom background color and Custom text color set the colors of the table. Transparent keeps the colors of Theme settings → Colors → Body.
The Section design colors color the area around the table. The section heading, gutter and SEO settings are the standard ones, described on General section styling.
Table blocks
Each block adds one row to the table, and every block has a Heading (the row name). The blocks are the same as in the Product comparison section:
- Description: the description, whole or as an excerpt (Truncate description).
- Price: the price, with the compare-at price when on sale.
- Vendor: the vendor.
- Rating: the star rating from your reviews app.
- Icons list: the product icons from Theme settings → Product card → Dynamic icons list.
- Dynamic text: one product metafield, typed in Label metafield as
namespace.key. Add one block per metafield. - Product link: a button to the product page, with its Button label.
- Variants: the option names and values of each product, for example "Size: S, M, L".
Why does the compare switch not show on my collection page?
Because Enable comparing is off, or the page is not a collection page. Comparing exists only in the Product grid section of the collection template. Search results, the Featured collection section and other product grids have no compare checkbox. The switch also stays hidden on a collection without products.
How many products can customers compare?
Up to 4. After 4 products, the other checkboxes are disabled and the bar says "You can compare up to 4 products". The Compare button needs at least 2 products.
Why does a row show "-" for some products?
Because those products have no value for that row, for example an empty metafield or no vendor. The cell shows the Empty fields label. Fill the value on the product in Shopify admin, or change the label.
All Product comparison page settings
Every setting of this section, with its type and default.
Where to find it: Products → compare → Product comparison.
Accepts these blocks: Description, Price, Vendor, Rating, Icons list, Dynamic text, Product link and Variants.
Product comparison section: Section heading
Where to find it: Products → compare → Product comparison → Section heading
The Product comparison section uses the standard Section heading settings, listed in General section styling. Not available in this section: Button label and Button link.
Heading (text field, default: "Product comparison").
Subheading (formatted text, default: "Compare your products").
Heading size (dropdown, default: Regular). Options: Regular, Large.
Text alignment (dropdown, default: One row: Left). Options: One row: Left, Two rows: Left, Two rows: Center.
Show back button (checkbox, default: on): Shows a back button above and below the table. It returns to the page the customer came from, or to the All products collection.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Product comparison").
Subheading (formatted text, default: "Compare your products").
Show back button (checkbox, default: on): Shows a back button above and below the table. It returns to the page the customer came from, or to the All products collection.
Product comparison section: Content
Where to find it: Products → compare → Product comparison → Content
Show table headings (checkbox, default: on): Adds a first column with the row names, taken from the Heading of each block.
Empty fields label (text field, default: "-"): Sets the text shown in a cell when a product has no value for that row, for example an empty metafield.
Media aspect ratio (dropdown, default: Cropped: Square (1:1)): Sets the shape of the product images at the top of each column. Natural keeps each image's own shape. Options: Uncropped: Natural, Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).
Product comparison section: Table style
Where to find it: Products → compare → Product comparison → Table style
Custom background color (color, default: transparent): Sets the background color of the table. Transparent keeps the body background.
Custom text color (color, default: transparent): Sets the text, border and rating star color of the table. Transparent keeps the body text color.
Product comparison section: Section design
Where to find it: Products → compare → Product comparison → Section design
The Product comparison section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Text color (color, default: transparent).
These settings differ from the standard ones or exist only here:
Text color (color, default: transparent).
Product comparison section: Gutter
Where to find it: Products → compare → Product comparison → Gutter
The Product comparison section uses the standard Gutter settings, listed in General section styling.
Decrease top margin (checkbox, default: off).
Remove bottom margin (checkbox, default: off).
Product comparison section: SEO
Where to find it: Products → compare → Product comparison → SEO
The Product comparison section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Description block
Where to find it: Products → compare → Product comparison → Add block → Description
One Description block per section.
Heading (text field, default: "Description"): Sets the row name shown in the headings column when Show table headings is on.
Truncate description (dropdown, default: Truncate: Show a small excerpt): Sets how much of the product description the Description row shows: the whole formatted description, or a plain excerpt of 10, 30 or 40 words. Options: Don't truncate, Truncate: Show a small excerpt, Truncate: Show a medium excerpt, Truncate: Show a large excerpt.
Price block
Where to find it: Products → compare → Product comparison → Add block → Price
One Price block per section.
Heading (text field, default: "Price"): Sets the row name shown in the headings column when Show table headings is on.
Vendor block
Where to find it: Products → compare → Product comparison → Add block → Vendor
One Vendor block per section.
Heading (text field, default: "Vendor"): Sets the row name shown in the headings column when Show table headings is on.
Rating block
Where to find it: Products → compare → Product comparison → Add block → Rating
One Rating block per section.
Heading (text field, default: "Rating"): Sets the row name shown in the headings column when Show table headings is on.
Icons list block
Where to find it: Products → compare → Product comparison → Add block → Icons list
One Icons list block per section.
Heading (text field, default: "Icons list"): Sets the row name shown in the headings column when Show table headings is on.
This theme allows you to add custom product icons through dynamic content. See Dynamic icons list.
Dynamic text block
Where to find it: Products → compare → Product comparison → Add block → Dynamic text
Heading (text field, default: "Text"): Sets the row name shown in the headings column when Show table headings is on.
Label metafield (text field): The product metafield shown in this row, typed as namespace.key (for example custom.product_text). Add several Dynamic text blocks for several metafields.
Product link block
Where to find it: Products → compare → Product comparison → Add block → Product link
One Product link block per section.
Heading (text field, default: "Link"): Sets the row name shown in the headings column when Show table headings is on.
Button label (text field, default: "View product"): Sets the text of the button to each product page.
Variants block
Where to find it: Products → compare → Product comparison → Add block → Variants
One Variants block per section.
Heading (text field, default: "Variants"): Sets the row name shown in the headings column when Show table headings is on.
Related pages
- Collection page: the Product grid section with Enable comparing.
- Product comparison section: a fixed comparison table with products you pick.
- Dynamic icons list: the icons shown in the Icons list row.
- General section styling: the section heading, design, gutter and SEO settings.
Quick view template
The Quick view template of Combine builds the popup that opens from the quick buy button, with its own gallery settings and product blocks.
Collection page
The Collection page template of Combine: the collection banner, the product grid with filters, sorting and comparing, and the collection description.