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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F1TxTA3nrUJFkKdOJi2jQ%2Fani5.gif?alt=media&#x26;token=d2fd9985-2c51-45e1-aae2-c73fe14ced3f" alt=""><figcaption></figcaption></figure>

***

## **How It Works** 🚀&#x20;

{% hint style="warning" %}
This feature is only available on **Collection pages.**
{% endhint %}

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FW6LCXIy5JjEFspQ7fwcU%2Fimage.png?alt=media&#x26;token=178e17c0-09be-4ea0-a2fa-01c1b0cac3da" alt=""><figcaption></figcaption></figure>

## How to enable Product compare feature

{% hint style="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.
   {% endhint %}

Learn more:

{% content-ref url="../theme-settings/product-compare" %}
[product-compare](https://docs.foxecom.com/hyper-theme/theme-settings/product-compare)
{% endcontent-ref %}

## How to edit Product compare

{% hint style="success" %}
Steps:

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FRVGnJzHYv84DUJLjpuUi%2Fimage.png?alt=media&#x26;token=2633e52d-2280-4ad2-945b-bd2fe63bd6e0" alt=""><figcaption></figcaption></figure>

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

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/pages-global-sections/product-compare.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
