How to use Electro Product Comparison

Theme: Electro · Section type: All-template section

The Product comparison section shows up to 5 products side by side in a table, with their prices, options, descriptions and specifications from product metafields. It helps customers see the differences between similar products and choose the right one.

Note: You can add this section to any template, but not to the header or footer. Each section compares up to 5 products. On product pages, use Product comparison (Product page) instead: it adds the current product to the table and finds products to compare automatically. The compare button on product cards in collections is a different feature, and lets customers compare up to 3 products.

Product comparison of 3 monitor arms with options, descriptions and two buttons

What you can do

Add the section and choose products
Add specification rows from metafields
Let customers swap the compared products
Add buttons below the table
See what customers see
Change the section settings
Fix common problems

Add the section and choose products

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Product comparison. The section comes with 3 Product blocks.
Click a Product block and select a product. Repeat for each block.
To compare more products, click Add block > Product. You can add up to 5.
Click Save.

Tip: Compare products of the same type, with the same metafields filled in. Rows with values for only one product don't help customers decide.

Add specification rows from metafields

Set up the product metafields and the metafield namespace. See "How to set up product metafield".
In the section, under Table, enter the Comparison metafield keys separated by commas (for example height, width, depth). Each key becomes a row, in the same order.
Set Metafield row revealed by default to the number of rows customers see before they click View more.
Click Save.

To choose what else appears in the table, such as the vendor, product attributes, description and View full details links, go to Theme settings > Product comparison. These settings apply to both comparison sections.

Let customers swap the compared products

Available in Electro 3.5.0 and later.

In Shopify admin, create a collection with the products customers can choose from.
In the section, under Table, select Enable product swap.
In Swap products collection, select the collection.
Click Save.

Note: The dropdown lists up to 12 products from the collection, plus the product already in each column.

Add buttons below the table

Under Buttons, enter a Button 1 label and choose a Button 1 link.
Choose a Button 1 style: Primary, Secondary or Tertiary.
Repeat for Button 2, or leave its label empty to hide it.
Click Save.

What customers see

The table: each product is a column with its image, title and price. Below are the rows: Options (variant selectors and stock), Descriptions, and one row per metafield key.
Options: customers can pick a variant in each column to see its price and stock. This section doesn't have an Add to cart button. To add one, use Product comparison (Product page) on the product template.
View more: when there are more metafield rows than Metafield row revealed by default, customers click View more to show the rest and View less to hide them.
Product swap: each column has a dropdown above it. When customers choose another product, that column updates without reloading the page.
Mobile: with 3 or more products, customers swipe the table sideways. The row titles stay on the left.

Product comparison on mobile: customers swipe the table sideways

Settings reference

General

Setting	What it does
Color scheme	Sets the colors of the section.
Subheading	Sets a short line above the heading. Leave it empty to hide it.
Heading	Sets the section heading. Leave it empty to hide it.
Heading size	Sets the heading size from H2 to H5.
Description	Sets the text under the heading.

Layout

Setting	What it does
Content alignment	Aligns the subheading, heading, description and buttons Left or Center.

Table

Setting	What it does
Comparison metafield keys	Sets the product metafield keys to compare, separated by commas. Each key is a row.
Enable product swap	Adds a dropdown above each column so customers can change the product. Works with Swap products collection.
Swap products collection	Sets the collection whose products are listed in the dropdown, up to 12.
Metafield row revealed by default	Sets how many metafield rows show before View more, from 1 to 10.

Buttons

Setting	What it does
Button 1 label, Button 2 label	Sets the button text. Leave it empty to hide the button.
Button 1 style, Button 2 style	Shows the button as Primary, Secondary or Tertiary.
Button 1 link, Button 2 link	Sets the page the button opens.

Product block

Setting	What it does
Product	Sets the product in this column.

Theme settings > Product comparison

Setting	What it does
Show vendor	Shows the vendor above the title.
Show product attributes	Shows product attributes as badges. Set them up in Theme settings > Product information.
Show stock number	Shows how many items are left.
Show product description	Shows the Descriptions row, up to 5 lines.
Enable view full details	Adds a View full details link under each product.
Image ratio	Sets the image shape: Portrait (2:3), Square or Landscape (3:2).
Image fit type	Fills the image area (Cover) or shows the whole image (Contain).
Image background	Sets the color behind images with a transparent background.

Troubleshooting

The metafield rows don't appear.
Check that Comparison metafield keys match your metafield keys and that the namespace is set in Theme settings > Product information. See "How to set up product metafield".

I can't add a sixth product.
Each section compares up to 5 products. To compare more, add a second Product comparison section.

The swap dropdown doesn't appear.
Select Enable product swap and choose a Swap products collection that has products. Without a collection, there's no dropdown.

The current product isn't in the table on my product page.
This section always shows the products you select. On the product template, use Product comparison (Product page), which adds the current product automatically.

I can't find "Display in product page".
This setting no longer exists. Use Product comparison (Product page) on the product template instead.

Updated on: 30/10/2026

Was this article helpful?

Thank you!