> 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

The provided page demonstrates products added to the compare list.

{% 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7nO8iYWTBfdGIlbAnQFb%2Fcompare_button.png?alt=media&amp;token=db2193de-bb35-4308-9cd0-ccf7645e4795" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FgKnFt1QKMiCxvuJ8NHF8%2Fcompare_button%20header.png?alt=media&amp;token=7384fc81-5377-497e-8e78-fd58315b4e02" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FhFrP1Wfpmoy5jaWrMmgW%2Fcompare_only%20different%20bttn.png?alt=media&amp;token=e912e5b5-8df3-412d-aa93-eda2790a407a" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FJRGyXXaLdYSqy37RHr2t%2Fcompare_product%20metafield.png?alt=media&amp;token=58076dbe-2f4d-45ad-b88e-66ac9b329d66" alt=""><figcaption></figcaption></figure>

***

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FECLKPaxVDoMJZ7vWluoy%2Fcompare_desktop.png?alt=media&amp;token=2385446b-55e0-43ed-8c7f-9d7de8c327f3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVraT9LY1EKnMEiw91S3Q%2Fcompare_mobile.png?alt=media&amp;token=90a83f6e-04ad-4ee7-996c-1a0911b669ab" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}