# Compare Color

## What is the Compare Color?

This product block lets customers compare product colors directly on the product page. And it helps them get an overview and judge which color suits them best.

It is similar to the product comparison feature. But instead of comparing many products by their features, it compares one product in different colors.

Imagine your product has five to seven colors, customers have to take the trouble to choose each color to know what they look like, have to click each one, it is very time-consuming and difficult to visualize.

<figure><img src="/files/9W2PXS0PTXlEtyaqIco8" alt=""><figcaption></figcaption></figure>

So instead of having to take that trouble, we have created a feature that helps customers not have to click on each color palette anymore, just choose the Compare Color button to be able to see this product with all different colors. It is simple and visual to see the everything at once. From there, it is easy to make a purchase decision that satisfies their wishes right from the color selection step.

If you make the page convenient and easy, customers will trust your store more.

[**Click here to see the link demo ->**](https://library.smind.io/products/all-that-sweatshirt?view=compare-color)

## How To Install The Compare Color?

Step 1: In Shopify Admin, going to Smind Section app and find **Compare** **Color** in Product Block tab of Library. Click Install and Customize it.

<figure><img src="/files/6zY9eeClKthsHUrIdDlK" alt=""><figcaption></figcaption></figure>

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> **Compare Color**

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

Step 3: Copy the block ID. For example: smi-block-compare-color-1

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

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section. And insert the block ID of **Compare Color** to the Section ID. You can change the block name if you want.

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

Step 5: Next, you can rearrange the relevant blocks within the product detail sections. Scroll down to this product blocks and start to customize it.

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

Step 6: Now you have to change the content for this feature

* **Title**: You can set the heading that appears beside the color comparison icon.
* **Text size**: Adjusts the font size of your heading

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

* Color selector type: For the **Color** option, it shows plain color swatches in the table. For the **Thumbnail** option, it shows small product images instead of solid swatches.

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

* **Show “Add to cart” button**: Add a button right in the compare popup, letting customers add the chosen variant without closing it.

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

* **Color:** You can use the color picker here to change the color for the whole feature, like changing the text color.

<figure><img src="/files/3wTHzJfxH3U5Yy8n0GAP" alt=""><figcaption></figcaption></figure>

* **Top and bottom padding**: You can also change the spacing between top and bottom for this features

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

Step 7: Click **Save** to apply the changes.


---

# 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/in-app/library/product-blocks/compare-color.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.