> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/pc1_1gzn4zu.png)

**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

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Product comparison**. The section comes with 3 Product blocks.
3. Click a **Product** block and select a product. Repeat for each block.
4. To compare more products, click **Add block** > **Product**. You can add up to 5.
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

1. Set up the product metafields and the metafield namespace. See "How to set up product metafield".
2. 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.
3. Set **Metafield row revealed by default** to the number of rows customers see before they click **View more**.
4. 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.

1. In Shopify admin, create a collection with the products customers can choose from.
2. In the section, under **Table**, select **Enable product swap**.
3. In **Swap products collection**, select the collection.
4. 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

1. Under **Buttons**, enter a **Button 1 label** and choose a **Button 1 link**.
2. Choose a **Button 1 style**: Primary, Secondary or Tertiary.
3. Repeat for Button 2, or leave its label empty to hide it.
4. 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/pc2_c1jlw4.png =390x778)


## 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.

## Related articles

- [Product Comparison vs Product Comparison (Product Page) Section](https://help.ecomx.co/en/article/product-comparison-vs-product-comparison-product-page-section-1kmby07/)
- [How to set up product metafield](https://help.ecomx.co/en/article/electro-how-to-set-up-product-metafield-1u6pmhk/)
- [How to use Electro Product template](https://help.ecomx.co/en/article/electro-how-to-use-electro-product-template-hwchis/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)