# Favorites & Compare

{% hint style="info" %}
Colors and layout of the buttons can be adjusted in *Theme settings -> Product cards ->* [*<mark style="color:blue;">Favorites & Compare</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/product-cards#favorites-and-compare).
{% endhint %}

## Favorites

Display the favorites icon in the Header, as well as the favorites button on product cards and product pages of the entire store, using the **"Enable"** option.

The page template can be specified in the **"Page"** source selector.

The favorites icon can be switched between "Default" and "Alternative" using the **"Icon"** picker.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVZ8ad0HDVWg3ZiuWmS5R%2Fsettings_favorites.png?alt=media&#x26;token=450bcc41-e326-45fd-bdf0-7706ed751b83" alt=""><figcaption></figcaption></figure>

## Compare

Activate the **"Enable"** option to place the compare icon in the Header, compare button on product cards, and product pages store-wide.

The corresponding template can be specified in the **"Page"** source selector.

In the **"Grouping"** drop-down, you can decide whether to group selected products by specifications such as "Product type", "Vendor", or "First collection handle". Select the "Do not group" option to cancel grouping.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FpsJt5D4xEEppAmwFRgwV%2Fsettings_compare.png?alt=media&#x26;token=91f324f4-3ea0-4f90-b879-99b89a33ec8e" alt=""><figcaption></figcaption></figure>

### Configuring Favorites and Compare features in a store

To display Favorites and Compare features, a few steps are required:

#### **Step 1**

Go to your *Shopify admin -> Online Store -> Pages* and create a new page. Then, assign a custom "*compare"* or *"favorites"* template to a page:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fh8inxBNeSU8VG1quwulp%2Fcompare_admin.png?alt=media&#x26;token=eab0b633-9f2a-4dce-8beb-6a907a029177" alt=""><figcaption></figcaption></figure>

#### **Step 2**

Select a page in the Theme Editor by navigating to *Theme settings ->* [*<mark style="color:blue;">Compare</mark>*](#compare) or [*<mark style="color:blue;">Favorites</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/favorites).

#### **Step 3**

Navigate to the *"Compare"* or *"Favorites"* page by selecting a template from the top drop-down, *Pages -> compare / favorites*.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fno2AcfMwZ5n34utJh3Jq%2Fcompare_template.png?alt=media&#x26;token=7ec43308-1521-43ee-907d-149f50e8c5e8" alt=""><figcaption></figcaption></figure>

#### **Step 4**

Add any configurations in the "[<mark style="color:blue;">Compare</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/compare)" or "[<mark style="color:blue;">Favorites</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/favorites)" section.