> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/sections/compare-and-compare-page.md).

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