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

# Product Comparison vs. Product Comparison (Product Page) Section

**Theme:** Electro · **Section type:** Overview

Electro has two sections that show products side by side in a comparison table. **Product comparison** compares products you choose, on any page. **Product comparison (Product page)** compares the product a customer is viewing with its related products, and changes for every product. This article explains the difference so you can choose the right one, and shows how to set up the Product page version.

![Product comparison (Product page) with the current product and 3 related products on the Electro preset](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cmp1_7cet51.jpg)

**What you can do**
- Choose the right comparison section
- Set up Product comparison (Product page)
- See what customers see
- Change the Product page settings
- Fix common problems

## Choose the right comparison section

| Aspect | Product comparison | Product comparison (Product page) |
| ---- | ---- | ---- |
| Where to use it | Any template except the header and footer. | The product template. It's already in the default product template and isn't listed in Add section. |
| Which products | Products you select, up to 5 Product blocks. | The current product plus 2, 3 or 4 related products. |
| Same on every page | Yes, it always shows the products you selected. | No, it changes with the product being viewed. |
| Related products source | Not used. | Shopify's related products, which you can adjust in the Search & Discovery app. |
| Current product badge | No. | Yes, the current product is marked and other prices show the difference. |
| Add to cart button | No. | Yes, with Show add to cart button. |
| Product swap dropdown | Yes. | Yes. |
| Buttons below the table | Yes, up to 2. | No. |
| Best for | Comparing a fixed set of popular products, for example on the homepage. | Helping customers decide on a product page and buy from the table. |

Both sections use the same table settings in **Theme settings** > **Product comparison** (vendor, product attributes, stock number, description, View full details, and image options), and both read specifications from product metafields.

> **Note:** The compare button on product cards in collections is a third, separate feature. It lets customers pick up to 3 products to compare. See "How to use Electro Collection template".

To set up the Product comparison section, see "How to use Electro Product comparison".

## Set up Product comparison (Product page)

1. Set up the product metafields and the metafield namespace. See "How to set up product metafield".
2. In the theme editor, open a product template.
3. In the left sidebar, click the **Product comparison (Product page)** section. It's part of the default product template.
4. Under **Table**, choose the **Number of related products**: 2, 3 or 4.
5. Enter the **Comparison metafield keys** separated by commas (for example battery_life, weight, bluetooth). Each key becomes a row.
6. Set **Metafield row revealed by default** to the number of rows customers see before they click **View more**.
7. Optional: clear **Show add to cart button** to hide the Add to cart button in each column.
8. Click **Save**.

> **Tip:** To control which products are compared, open the Search & Discovery app in Shopify admin and set the related products for your main products. Otherwise, Shopify picks related products automatically.

### Let customers swap the compared products

Available in Electro 3.5.0 and later.

1. Under **Table**, select **Enable product swap**.
2. Optional: in **Swap products collection**, select the collection to list in the dropdown. If you leave it empty, the dropdown uses the product's first collection.
3. Click **Save**.

## What customers see

- **The table:** the first column is the product being viewed, marked with a **Current product** badge on the image (**Current** on mobile). The next columns are related products. Each column shows the image, title and price.
- **Price difference:** under the price of each related product, customers see how much more or less it costs than the current product, for example "+$20.00 vs current".
- **Options and Add to cart:** customers can choose a variant in each column, see its stock, and add it to the cart from the table when **Show add to cart button** is on.
- **Specification rows:** one row per metafield key, with an icon for common keys such as battery, weight, display or bluetooth. Customers click **View more** to show the rows after **Metafield row revealed by default**, and **View less** to hide them.
- **Product swap:** a dropdown sits above each related product column. When customers choose another product, that column updates without reloading the page.
- **Mobile:** customers swipe the table sideways. The row titles stay on the left.
![Swapped products in the comparison table with Add to cart buttons](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cmp2_n2wzft.jpg)


## Settings reference

These are the settings of the **Product comparison (Product page)** section.

### 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. |
| Section description | Sets the text under the heading. |

### Layout

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

### Table

| Setting | What it does |
| ---- | ---- |
| Number of related products | Sets how many related products are compared with the current product: 2, 3 or 4. |
| Comparison metafield keys | Sets the product metafield keys to compare, separated by commas. Each key is a row. |
| Show add to cart button | Shows an Add to cart button in each column. |
| Enable product swap | Adds a dropdown above each related product column so customers can change the product. |
| Swap products collection | Sets the collection listed in the swap dropdown. If it's empty, the product's first collection is used. Appears with Enable product swap. |
| Metafield row revealed by default | Sets how many metafield rows show before View more, from 1 to 10. |

### Custom color

| Setting | What it does |
| ---- | ---- |
| Current badge background | Sets the background color of the Current product badge. |
| Current badge text | Sets the text color of the Current product badge. |

## Troubleshooting

**The section shows fewer related products than I set.**
Shopify returns only the related products it has for that product. Add related products for it in the Search & Discovery app, or choose a lower **Number of related products**.

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

**The swap dropdown doesn't appear.**
Select **Enable product swap**. The swap collection (or the product's first collection) must have at least 2 products.

**I can't find Product comparison (Product page) in Add section.**
This section has no preset, so it isn't listed in **Add section**. It's included in the default product template. If you removed it from a template, create a new product template from the default one to get it back.

**I want the same products compared on every page.**
Use the **Product comparison** section and select the products in its Product blocks.

## Related articles

- [How to use Electro Product comparison](https://help.ecomx.co/en/article/how-to-use-electro-product-comparison-14dk4he/)
- [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/)
- [How to use Electro Collection template](https://help.ecomx.co/en/article/electro-how-to-use-electro-collection-template-yh1jxm/)