Product comparison

What this section does

Product comparison puts two product identities and their feature values together so shoppers can compare them. Select products from your store or enter a name and image for a generic or external item. You choose the highlighted product and supply the comparison facts.

For ingredients, materials, nutrition, or specifications with multiple columns, use Data table. Product comparison always compares two items. It does not compare prices automatically, generate ratings, scrape competitor information, or decide which product is better.

Add it and get started

Choose one of two entry points:

Independent section: on the required template, select Add section → Product comparison, Comparison rows, or Comparison with text.
Product content block: on a product template, open Product content and select Add block → Product comparison. See Product content for section setup and purchase controls.

Both entries offer all three layouts, but save their own content independently. Data table in Custom section is a different block, not another entry for Product comparison.

Quick start:

Select First product and Second product. An empty First product uses the current product on a product template. Choose or manually describe the second item.
Optionally override each product’s title or image.
Fill in Comparison rows, knowing the format before you type: each paragraph or line is one comparison with exactly three cells separated by the pipe character | — Feature|First value|Second value. The second cell is the first product’s value; the third is the second product’s value. Replace the three neutral example rows with your own, for example:
```
Cleaning|✓ Removable liner|— Fixed liner
Access|Top and side|Single opening
```
The statements above are format examples only — use facts you can substantiate. Rows with more or fewer than three cells are hidden; the full rules are under Enter comparison rows below.
Choose Layout and Highlighted product. Fill in Highlight label if you want a label.
Optionally add Button label, Button link, and Note. Check desktop and mobile before saving.

New instances include three neutral example rows so you can see the layout immediately. Replace these examples with accurate product information. Clearing Comparison rows, or leaving no valid row, hides the component in the editor and storefront alike. A heading, selected products, or images alone will not make an empty comparison appear.

Choose a layout

Layout	Best for	Presentation
Highlighted columns	Following the highlighted product down a column	In a wide container, a feature column and two product columns, with an optional label and tinted highlight
Comparison rows	Reading one difference at a time	Each feature label sits above paired product values; highlighted value areas receive the tint
Text and comparison	Explaining the choice before showing the details	Introduction and button on the left, comparison on the right in wide containers; stacked when space is limited

The presets choose the starting layout: Product comparison uses Highlighted columns, Comparison rows uses the row layout, and Comparison with text uses Text and comparison. Changing Layout later keeps your content and never swaps the first and second products.

Example setups

Two store products: choose Highlighted columns, select both products, and set Highlighted product to First product or Second product. Enter factual differences and add a Button label. With Button link empty, the button uses the highlighted store product’s details page.

Current product versus a generic alternative: on a product template, leave First product empty. Leave Second product unselected and enter Second product title and, optionally, Second product image. Choose Comparison rows and describe only differences you can substantiate. Highlight the first product to link to its details page, or enter an explicit Button link for another destination.

An explanation inside Product content: add the Product comparison block, choose Text and comparison, and enter a Description explaining the comparison. Use Note for the source or comparison conditions. When the purchase column narrows the content area, the introduction stacks above the comparison automatically. The purchase controls still use the page’s main product.

Key settings explained

Enter comparison rows

Use the ASCII pipe character | to separate exactly three cells. In the Comparison rows rich-text field, enter each comparison as a new paragraph or line. Do not add Markdown table headings or a divider line.

Example format only; replace these statements with accurate product information:

Cleaning|✓ Removable liner|— Fixed liner
Access|Top and side|Single opening

The first cell is the feature, the second is the first product’s value, and the third is the second product’s value. Literal pipes inside a cell and extra outer pipes are not supported.

Blank rows are skipped. A row with no feature name, or with both product values empty, is hidden.
Rows with fewer or more than three cells are hidden; values are not moved into another column.
One empty product value keeps its column and uses a neutral “not provided” indicator. It does not mean that the product lacks the feature. For example: Warranty|One year|.
Cell content is plain text. Bold formatting, HTML, and links entered in rich text are not retained as cell formatting.
Aim for no more than 12 comparisons for readability. This is a recommendation, not a 12-row truncation switch. Split large datasets; platform rendering limits still apply.

Status icons and highlighting

With Show status icons on, a value receives a check, cross, or neutral icon only when it explicitly starts with ✓, ✕, or —. Ordinary text does not acquire an automatic status icon. Turning icons off preserves equivalent text or symbols.

Highlighted product controls emphasis only. Second product does not swap the values, and None removes the product highlight and label. Color is not a certification or an automatic verdict. Use Highlight label only for claims supported by your actual products; the theme does not verify them.

Product identity and the button

Manual First/Second product title overrides the selected product’s title. Without either, neutral Product A/Product B labels are used. Manual First/Second product image overrides the product’s featured image. Without an available image, none is shown; the theme does not invent product imagery.

For an external item, you can enter only a title and image. The theme does not scrape its website or create competitor product records.

Fill in Button label to request a button. Button link takes priority when supplied; otherwise the button links to the highlighted store product’s details page. Without a usable link it stays hidden. With highlight set to None, or with a manually described highlighted item, enter a link explicitly if needed. This button navigates to details; it does not add a compared item to the cart. Product content purchase controls still refer to the page’s main product.

Different content for each product

Static text belongs to the template, so editing a shared product template can affect every product using it. For product-specific content, connect compatible product metafields where Shopify offers a dynamic-source button. Available sources depend on the field type and template context; not every setting accepts the same source.

An empty First product uses the current product on product templates. The second product is never guessed. The two entries do not copy content automatically; connect an appropriate shared source separately if you need to reuse data.

Mobile and narrow content columns

Product values stay paired, and long text wraps. In narrow space, the feature label appears above the two side-by-side values. Text and comparison moves its introduction above the table.

Adaptation follows the component’s available width. A wide browser can still produce a stacked layout when Product content’s purchase column narrows the text area. The independent section’s Full width setting does not override Product content’s column width.

Comparison text and detail links work without JavaScript. Status has a text equivalent, the table keeps feature and product headers, and the button is keyboard accessible.

Full settings reference

These 20 settings are shared by both entries. Names match the theme editor:

Setting	Default	How to configure it
Layout	Highlighted columns	Highlighted columns / Comparison rows / Text and comparison
Subheading	Empty	Optional text above the heading; empty hides it
Heading	Product comparison	Module heading; clearing it retains a name for assistive technology
Description	Empty	Optional formatted introduction, beside or above the table in Text and comparison
First product	Not selected	First store product; empty uses the current product on product templates
First product title	Empty	Override the first product’s name or name a manually described item
First product image	Not selected	Override the first image; recommended 800 × 800 px or larger. Do not put essential information only in the image
Second product	Not selected	Choose the second store product explicitly; another product is not selected automatically
Second product title	Empty	Override the second product’s name or name an external item
Second product image	Not selected	Override the second image; recommended 800 × 800 px or larger
Show product images	On	Control images for both products; missing images do not create placeholders
Image ratio	Square (1:1)	Square (1:1) / Portrait (4:5); both use the same ratio and show the complete image
Highlighted product	First product	First product / Second product / None; emphasis chosen by you, not a rating
Highlight label	Empty	Label for the highlighted product; hidden when empty or no product is highlighted
Comparison rows	Three neutral example rows	Replace Example feature, Example option, and Example status with your own information. Exactly three cells per paragraph; no valid row hides the component
Show status icons	On	Interpret only explicit ✓, ✕, or — prefixes
Highlight background	Lilac	None / Cream / Lilac / Mint / Apricot; None removes the tint, while the emphasis border and label can remain
Button label	Empty	Optional detail-button text; empty hides the button
Button link	Empty	Explicit link first, otherwise the highlighted store product’s details URL; no usable URL hides the button
Note	Empty	Source, comparison conditions, scope, or another explanation

The following three settings are only in the independent section. Product content manages the block’s outer layout:

Setting	Default	Range and effect
Full width	Off	Expand the content width while retaining page-edge spacing
Top spacing	32 px	0–120 px, step 8
Bottom spacing	32 px	0–120 px, step 8

Common questions

Why is the component invisible? Comparison rows needs at least one row with exactly three cells, a feature name, and at least one non-empty product value. New instances include editable neutral examples; clearing them or entering only invalid rows hides the component. Existing explicitly saved empty content stays empty. The examples are not facts about your products.

Why did one row disappear? Check the pipe count, feature name, and empty values. This component requires three cells and differs from Data table’s missing/extra-cell handling.

Why did highlighting change without moving the values? Highlighting changes emphasis only. Product positions and input-column order remain stable to avoid misrepresenting information.

Why is there no button? Supply Button label and either an explicit Button link or a highlighted store product with a real details link. A manual title and image do not create a URL.

Does it fetch prices, ratings, or add both products to the cart? No. Product selection supplies identity, a featured image, and a details URL. You maintain the comparison facts.

Can I add nested comparison-row blocks inside Product content? No. Enter paragraphs in the same Comparison rows field. The ordinary Table block’s styles are separate from these three product-comparison layouts.