> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/compare.md).

# Compare

{% hint style="info" %}
Products are added to the Compare page when the "Compare" button is pressed. The button is available on product cards or product pages.
{% endhint %}

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

{% hint style="info" %}
The Compare page can be viewed after pressing the compare icon in the Header. Activate the icon in *Theme settings ->* [*<mark style="color:blue;">Compare</mark>*](/unicorn-shopify-theme/theme-settings/compare.md).
{% endhint %}

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

***

## Compare

{% hint style="success" %}
**Tip:** To edit the page, navigate to *Pages -> compare* using the top drop-down menu.
{% endhint %}

**Show "Only different" checkbox**\
Activates the "Only different" button in the comparison table.\
When the checkbox is enabled, the similar product options are hidden in the table.

**Checked by default**\
If the option is enabled, the "Only different" button state remains active by default.

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

**Continue shopping link**\
Add a link redirection using the source selector.\ <mark style="color:orange;">**Note!**</mark> The "Continue Shopping" button is displayed on the empty page.

#### **Product cards**

**Image ratio**\
Choose the appropriate aspect ratio for product cards. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).

**Show vendor**\
Display the product vendor above the product title by simply enabling the checkbox.

***

### Theme Blocks

{% hint style="success" %}
The "Compare" section contains dynamic blocks to customize the table.\
**Tip:** To add a block, press **"Add block"** in the **"Compare"** section and select one from the list.\
Each block can be moved to the needed position in the product information section.
{% endhint %}

* **Image**. Displays an image of the selected product option in a separate row.
* **Title**. Add the block to display product titles in the table.
* **Options (single line)**. Displays all variants of the related product in a single row within the corresponding table field.
* **Options (split by name)**. Shows each product variant on its own separate line within the comparison table.
* **Price**. Displays an initial product price in the table.
* **Compare at price**. The comparison price can be shown in a separate row by adding the current block.
* **Availability**. Helps you to display the product availability information.
* **SKU**. Adds the SKU code to the table.
* **Weight**. If the product details page includes product weight information, add the current block to show that specification in the table.
* **Product type**. Adds the product type information to the table.
* **Vendor**. Adds a product vendor.
* **Product metafield**. This block helps to add information to the table linked to products using metafields.\ <mark style="color:orange;">**Note!**</mark> This block can be added several times if the content needs to be linked from multiple metafields.

**Metafield (namespace.key)**\
Use the field to specify the namespace and key of the developed metafield in your *Shopify admin -> Settings -> Metafields and metaobjects -> Products*.

**Row label (optional)**\
Change the row title using the field.

**Metaobject value field (optional)**\
If the product includes a specific value associated with a meta field, link it to the current field.

**List separator**\
Select the desired option to split the values by "Line break", "Line break with bullets", "Comma + space (, )", "Slash with spaces ( / )", "Pipe with spaces ( | )", or "Tab (\t)".

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

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/O4DNldGaO1lgSe7lq9YN" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/MjBT9MgFh8ZxnagpIfo6" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}