# Compare & Compare Page

## Overview

* The **"Compare"** section in our app allows customers to view multiple products simultaneously on the **"Compare Page"**, making shopping easier.

## How To Install ?

{% embed url="<https://youtu.be/U72BNZuDTcc>" %}

To use the **"Compare"** section, you need to install the **"Compare page"** section. Please follow the steps and images below."

1. From our app, click **Library**.
2. In the **Sections** tab, search for the keyword **Compare.**
3. Click the **Install** button to install the **Compare** and **Compare Page** sections.

{% hint style="warning" %}
Note: These section is **only compatible** with Smind's section. To ensure it works well, please use section of Smind
{% endhint %}

<figure><img src="/files/t2dUCUdaRr54kRkqwr2N" alt=""><figcaption></figcaption></figure>

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab.
5. Search for **Compare** section and click on it

<figure><img src="/files/qxHtCNaPx0OhnFAMQCKf" alt=""><figcaption></figcaption></figure>

6. Create a new template.
7. Enter the name of new template. For example: **Compare.** Click **Create Template.**

<figure><img src="/files/OAONuXIIwnCeLaQIFMqF" alt=""><figcaption></figcaption></figure>

8. From new template you've just created, click **Add Section.**
9. Search for **Compare Page** and click on it.

<figure><img src="/files/cYrOEJwmSgR7ThM7Knjt" alt=""><figcaption></figcaption></figure>

10. Go back to your Shopify admin, click **Page.**
11. Click **Add Page.**

<figure><img src="/files/xFq8zGxCF7pe9zOQnNKZ" alt=""><figcaption></figcaption></figure>

12. Enter the title of the page. For example: **Compare** page
13. Choose a template you've just created. For example: **Compare** template
14. Under the Visibility, select the **Visible** for the page. Click **Save**

<figure><img src="/files/u9jEGDzgsMSTQGBK0z5f" alt=""><figcaption></figcaption></figure>

15. Go to Shopify Editor sidebar, click on **Compare** section under the Global section.
16. Choose a page you've just created for the compare page. For example: **Compare** page

After a successful setup, you will see the product you want to compare on the **Compare page**.

<figure><img src="/files/hnnXXrQr3uClkWj5hZiG" alt=""><figcaption></figcaption></figure>

## How To Use ?

After adding the **Compare** section to your theme, the Compare icon will appear on the product. Clicking the icon will add the product to the **Compare page**.

{% hint style="warning" %}
The **'Compare'** is only displayed on our section. If you are not using our sections, it will not be visible.
{% endhint %}

<figure><img src="/files/vb4AdWfiIY00tc9T1sEs" alt=""><figcaption></figcaption></figure>

If you click the **Compare** icon again, two cases may occur (depending on your settings).&#x20;

<figure><img src="/files/hczR0AfhRLZmn0l4y44e" alt=""><figcaption></figcaption></figure>

Case 1:  The product will be removed from the **Compare page.**

<figure><img src="/files/DYSwr6QiDy6diDDQcPKw" alt=""><figcaption></figcaption></figure>

Case 2: The other is that it will take you to the page **Compare page.**

<figure><img src="/files/m0noyqGZbHYuEBMbMuwb" alt=""><figcaption></figcaption></figure>

When you access the **"Compare page"**,  you can view the products on the **Compare page** and remove them from the comparison list.

<figure><img src="/files/ZJqcsIyS0WLH2aeyraz8" alt=""><figcaption></figcaption></figure>

## Display Locations of the Wishlist

The **Compare** can be displayed on both desktop and mobile in the following locations.

1. **Header**&#x20;

<figure><img src="/files/kpwWd8UzlwjhEEg9elUf" alt=""><figcaption></figcaption></figure>

2. **Product card**

<figure><img src="/files/wZBIuSfiMsIpkkQK2UQ3" alt=""><figcaption></figcaption></figure>

3. **Product detail**

<figure><img src="/files/L45YuaFDwMRo2C3jzqQX" alt=""><figcaption></figcaption></figure>

4. **Quick view**

<figure><img src="/files/DTKj5DGqMUUBEKT4e4z4" alt=""><figcaption></figcaption></figure>

5. **Customer account**

<figure><img src="/files/wru10xSY21v0O8G2k8L5" alt=""><figcaption></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.smind.io/sections/compare-and-compare-page.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.