Product comparison section
The Product comparison section of Local shows up to four products you choose side by side in a table, with one row per block.
Applies to: Local 4.2.1 and later. Added in: Local 4.1.0. Last checked: 2026-10-13 against Local 4.2.1.
The Product comparison section shows a table that compares products side by side: each product is a column and each block is a row (price, rating, availability, specifications). You pick the products, so every customer sees the same table. Add it to the home page, a regular page or a product page.
Where to find it: Online Store → Themes → Customize → Add section → Product comparison (in the Tables category)
Local also has a comparison page where customers choose the products themselves while browsing a collection. See Product comparison page. Both versions share the same row blocks and design settings.
How the comparison table works
- Each product is a column. The first row of every column shows the product image and title, linked to the product.
- Each block is a row. Add one block for each piece of information you want to compare and drag the blocks into order. Every block can be added once.
- Row headings are optional. Each block's Heading is the label of its row, shown in a column on the left.
- Empty values get a placeholder. When a product has nothing for a row (no rating, no metafield value, no variants), the cell shows the Empty fields label.
Content
- Products are the products to compare, up to 4. The columns follow the order you pick them in.
- Show table headings (on by default) shows the left column with the row labels. Turn it off for a table without labels.
- Empty fields label is the text of an empty cell (default "-").
- Show current product first works when the section is on a product template: the product being viewed becomes the first column. If it is already in Products, it is not added twice.
- Media aspect ratio sets the shape of the product images: Natural (uncropped) or cropped to Short (4:3), Square (1:1, default), Tall (5:6) or Taller (2:3).
Show current product first adds the viewed product on top of the ones you picked. With 4 products in Products, a product page shows 5 columns. Pick 3 products to keep the table at 4 columns.
Table design
- Custom background color and Custom text color color the table.
- Accent sets the hover color of the buttons and links in the table.
The section heading, background, margins, SEO and visibility are the standard settings, see General section styling.
Table rows
Every row block has a Heading field: the row label in the left column.
- Description: the product description as plain text. Truncate description cuts it to about 10, 30 or 40 words (small, medium, large excerpt) or shows it in full (Don't truncate).
- Price: the price, with the compare-at price when on sale.
- Vendor: the product vendor.
- Rating: the star rating from the reviews app chosen in Theme settings → Product card → Rating app.
- Quick buy: an add to cart button (or the Quick view popup for products with options).
- Local availability: pickup availability at the store chosen in the store selector, see Product grid blocks.
- Icons list: the product icons from Theme settings → Product card → Dynamic icons list.
- Dynamic text: the text of a product metafield; type its reference in Label metafield as
namespace.key. - Product link: a button to the product page, with its Button label (default "View product").
- Nutriscore and Attribute meter: the same meters as on the product page, with their value typed or read from a metafield (Active item metafield, Active segment metafield). See Product attribute blocks.
- Variants: every option of the product with its values, for example "Size: S, M, L".
Setting up a comparison table
Add the section
In the theme editor, open the page (home page, a regular page or a product template), select Add section and choose Product comparison.
Pick the products
Select Products and choose up to 4 products. Drag them to change the column order.
Add the rows
Select Add block and add one block per row you want: Price, Rating, Description, Variants and so on. Drag the blocks into the order of the rows.
Name the rows
Select each block and type its Heading, the label of the row. Turn off Show table headings if the table needs no labels.
Set metafield rows
For Dynamic text, Nutriscore and Attribute meter, type the metafield as namespace.key (for example custom.weight). Find it in Shopify admin → Settings → Metafields and metaobjects → Products.
Show the viewed product first (product pages)
On a product template, turn on Show current product first and keep Products at 3 products.
How many products can I compare?
Up to 4 in Products. On a product template with Show current product first on, the viewed product is added as an extra column, so pick 3 products to stay at 4 columns. The comparison page that customers fill from the collection grid is capped at 4.
Can customers choose the products themselves?
Yes, on the comparison page. Turn on Enable comparing in the collection page's Product grid; customers then select products and open a comparison of their own selection. See Product comparison page.
All Product comparison settings
Every setting, with its type and default.
Accepts these blocks: Description, Price, Quick buy, Vendor, Rating, Local availability, Icons list, Dynamic text, Product link, Nutriscore, Attribute meter and Variants.
Product comparison section: Heading
Where to find it: Product comparison → Heading
The Product comparison section uses the standard Heading settings, listed in General section styling. In this section the group has only Heading, Subheading and Text alignment.
Heading (text field, default: "Product comparison").
Subheading (text field, default: "Compare your products").
Text alignment (dropdown, default: Left). Options: Left, Center.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Product comparison").
Subheading (text field, default: "Compare your products").
Product comparison section: Content
Where to find it: Product comparison → Content
Products (products picker, up to 4): Sets the products to compare, up to 4. Each product is a column, in this order.
Show table headings (checkbox, default: on): Shows the left column with the row labels (each block's Heading).
Show current product first (checkbox, default: off): On a product template, adds the viewed product as the first column, on top of the picked products. With 4 picked products the table has 5 columns.
Empty fields label (text field, default: "-"): Sets the text of a cell that has no value for that product.
Media aspect ratio (dropdown, default: Cropped: Square (1:1)). Options: Uncropped: Natural, Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).
Product comparison section: Table design
Where to find it: Product comparison → Table design
Custom background color (color, default: transparent).
Custom text color (color, default: transparent).
Accent (color, default: transparent): Sets the hover color of the buttons and links in the table.
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).
Heading text color (color, default: transparent): Sets the color of the text outside the cards, mostly the section heading.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is 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): Sets the HTML tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.
Product comparison section: Visibility
Where to find it: Product comparison → Visibility
The Product comparison section uses the standard Visibility settings, listed in General section styling.
Section visibility (dropdown, default: Show always): Shows the section on every screen, only below 768 px (mobile) or only from 768 px (desktop, tablets included). A hidden section is still in the page. Options: Show always, Show only on mobile, Show only on desktop.
Description block
Where to find it: Product comparison → Add block → Description
One Description block per section.
Heading (text field, default: "Description").
Truncate description (dropdown, default: Truncate: Show a small excerpt): Cuts the description to about 10, 30 or 40 words, or shows it in full. 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").
Quick buy block
Where to find it: Product comparison → Add block → Quick buy
One Quick buy block per section.
Heading (text field, default: "Quick buy").
Vendor block
Where to find it: Product comparison → Add block → Vendor
One Vendor block per section.
Heading (text field, default: "Vendor").
Rating block
Where to find it: Product comparison → Add block → Rating
One Rating block per section.
Heading (text field, default: "Rating").
Local availability block
Where to find it: Product comparison → Add block → Local availability
One Local availability block per section.
Heading (text field, default: "Local availability").
This theme shows local availability for products. See Collection page.
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").
This theme allows you to add custom product icons through dynamic content. See Dynamic icons list theme settings.
Dynamic text block
Where to find it: Product comparison → Add block → Dynamic text
Heading (text field, default: "Text").
Label metafield (text field): Type the product metafield to show, as namespace.key.
Product link block
Where to find it: Product comparison → Add block → Product link
One Product link block per section.
Heading (text field, default: "Link").
Button label (text field, default: "View product"): Sets the text of the button that opens the product page.
Nutriscore block
Where to find it: Product comparison → Add block → Nutriscore
One Nutriscore block per section.
Heading (text field, default: "Nutriscore").
Nutriscore block: Block Content
Where to find it: Product comparison → Add block → Nutriscore → Block Content
Active item (slider 1 to 5, default: 3).
Use dynamic sources to set the active item or segment with product metafields. See Product attribute blocks.
Active item metafield (text field): Type a number metafield (1 to 5) as namespace.key to set the active letter per product. Products without a value use Active item.
Nutriscore block: Item 1
Where to find it: Product comparison → Add block → Nutriscore → Item 1
Label (text field, default: "A").
Color (color, default: #007517).
Nutriscore block: Item 2
Where to find it: Product comparison → Add block → Nutriscore → Item 2
Label (text field, default: "B").
Color (color, default: #94C11E).
Nutriscore block: Item 3
Where to find it: Product comparison → Add block → Nutriscore → Item 3
Label (text field, default: "C").
Color (color, default: #FFDE00).
Nutriscore block: Item 4
Where to find it: Product comparison → Add block → Nutriscore → Item 4
Label (text field, default: "D").
Color (color, default: #F29200).
Nutriscore block: Item 5
Where to find it: Product comparison → Add block → Nutriscore → Item 5
Label (text field, default: "E").
Color (color, default: #DD1E01).
Attribute meter block
Where to find it: Product comparison → Add block → Attribute meter
One Attribute meter block per section.
Heading (text field, default: "Attributes").
Attribute meter block: Block Content
Where to find it: Product comparison → Add block → Attribute meter → Block Content
Segments (slider 1 to 10, default: 9).
Active segments (slider 1 to 10, default: 6).
Use dynamic sources to set the active item or segment with product metafields. See Product attribute blocks.
Active segment metafield (text field): Type a number metafield as namespace.key to set the active segment per product. Products without a value use Active segments.
Active segment color (color, default: #000000).
Fill segments up to active segment (checkbox, default: off).
Remove space between segments (checkbox, default: off).
Segments height (slider 3 to 10, default: 6).
Show active segments value (checkbox, default: off).
Start label (text field).
Middle label (text field).
End label (text field).
Variants block
Where to find it: Product comparison → Add block → Variants
One Variants block per section.
Heading (text field, default: "Variants").