# Product compare

<Embed url="https://youtu.be/34yIB8PR2eg" />

**Product compare** feature is a powerful tool to enhance customers' shopping experience. By allowing customers to compare products side-by-side, it simplifies decision-making and boosts confidence in their purchases. 🎯




<Video src="https://docs-assets.foxecom.app/hyper-theme/ani5_cwLIZMXI.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

***

## **How It Works** 🚀

<Hint type="warning">

This feature is only available on **Collection pages.**

</Hint>

A **Compare** button is displayed at the top of the product listing. Customers can select products for comparison.

![image](https://docs-assets.foxecom.app/hyper-theme/image_2Nv4vOag.png)

## How to enable Product compare feature

<Hint type="success">

Steps:

1. In the theme editor (Customize), go to **Theme settings**.
2. Select **Product compare.**
3. Click **Enable product compare** option and set **Max products in compare** (2-15 products).
4. **Save** the changes.

</Hint>

Learn more:

<PageLink href="https://docs.foxecom.com/hyper-theme/theme-settings/product-compare">Product compare</PageLink>

## How to edit Product compare

<Hint type="success">

Steps:

1. In the theme editor (Customize),  locate **Overlay group** > **Product compare**
2. Customize the comparison modal by editing its blocks.

</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/image_qFiRtz1z.png)

**Supported blocks in the Product compare modal:**

* **Product Info** 🛍️: Display the product name and any a View details button. The View details button direct customer to the product details page.
* **Description** ✍️: Highlight the product's unique features. You can enable text line limit to the content to keep it short.
* **Price** 💰: Show product pricing.
* **Vendor** 🏷️: Mention the product brand or supplier.
* **Type** 🛠️: Indicate the product category.
* **Product Variants** 🔄: If needed, show variant-related details.

You can:&#x20;

* Drag blocks to re-order them for a better comparison experience.
* Remove blocks if they are not necessary for your product comparison.

## **Best practices** ✅

* **Keep it simple**: Show only the most important details to avoid overwhelming customers.
* **Highlight differences**: Ensure fields like price, type, or description are clear to help customers spot differences.
* **Limit comparisons**: For the best user experience, keep the maximum number of products compared to 3–5. Too many items might confuse shoppers. 🤯