Product comparison section
The Product comparison section of Combine shows up to four products you pick side by side in a table of prices, metafields and variants.
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 section shows up to 4 products you pick side by side, in a table. Each block is one row of the table: price, vendor, rating, a metafield and more. Use it for a fixed comparison, for example your three best sellers on the home page or a "compare with" table on a product page.
Where to find it: Online Store → Themes → Customize → Add section → Product comparison (category Tables).
This section shows the products you choose. To let customers choose the products themselves from a collection, see Product comparison page.
Content
- Products sets the products of the table, up to 4. Without products, the table shows three placeholder columns.
- Show table headings adds a first column with the name of every row (the Heading of each block).
- Show current product first puts the product of the page in the first column, on a product page only. It is added to the products you picked, unless it is already one of them. Its Product link row reads "Current product".
- 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 (background, gradient, text) color the area around the table and the section heading. The section heading, gutter and SEO settings are the standard ones, described on General section styling.
Setting up a comparison table
Add the section
In the theme editor, select Add section and choose Product comparison. It starts with the Price, Rating and Product link rows.
Pick the products
Add up to 4 products in Products. On a product template, turn on Show current product first to compare the viewed product with them.
Build the rows
Select Add block for every row you need (Description, Price, Vendor, Rating, Icons list, Dynamic text, Product link, Variants). Drag the blocks to order the rows, and rename each row in its Heading.
Check the empty cells
Preview the table. Cells without a value show the Empty fields label. Fill the missing metafields in Shopify admin, or change the label, for example to "Not included".
Blocks
Each block adds one row to the table. Every block has a Heading, the row name shown in the first column when Show table headings is on.
Description
- Shows the product description.
- Truncate description shows the whole description, or an excerpt of 10, 30 or 40 words (small, medium, large) without formatting.
Price
- Shows the product price, with the compare-at price when the product is on sale.
Vendor
- Shows the product vendor.
Rating
- Shows the star rating from your reviews app, chosen in Theme settings → Product card → Product rating.
Icons list
- Shows the product icons with labels, from the metafields set in Theme settings → Product card → Dynamic icons list. See Dynamic icons list.
Dynamic text
- Shows the value of one product metafield, for example "Material" or "Battery life". You can add this block several times, one row per metafield.
- Label metafield is the metafield, typed as
namespace.key, for examplecustom.product_text.
Product link
- Adds a button to each product page.
- Button label is the button text (default "View product").
Variants
- Lists the options of each product with all their values, for example "Size: S, M, L". Customers cannot pick a variant here.
How do I compare products that have different features?
Add one Dynamic text row per feature and fill the matching metafields on each product. A product without a value shows the Empty fields label in that row. Create the metafields in Shopify admin → Settings → Metafields and metaobjects → Products, as Single line text.
Can customers add products to this table?
No. This section shows only the products you pick. For a table built by customers from the collection grid, turn on Enable comparing and use the compare template, as described on Product comparison page.
All Product comparison settings
Every setting of this section, with its type and default.
Accepts these blocks: Description, Price, Vendor, Rating, Icons list, Dynamic text, Product link and Variants.
Product comparison section: Section heading
Where to find it: Product comparison → Section heading
The Product comparison section uses the standard Section heading settings, listed in General section styling.
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.
Button label (text field).
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Product comparison").
Subheading (formatted text, default: "Compare your products").
Product comparison section: Content
Where to find it: Product comparison → Content
Products (products picker, up to 4): Sets the products compared in the table, up to 4, one column each. Without products the table shows three placeholder columns.
Show table headings (checkbox, default: on): Adds a first column with the row names, taken from the Heading of each block.
Show current product first (checkbox, default: off): Puts the product of the page in the first column when the section is on a product template. It is added to the products picked above unless it is already one of them, and its Product link row reads "Current product".
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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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
- Product comparison page: the comparison customers build from the collection grid.
- Collection page: the Enable comparing setting of the product grid.
- Dynamic icons list: the icons shown in the Icons list row.
- General section styling: the section heading, design, gutter and SEO settings.