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.

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

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.

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

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

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.

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.

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

• 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.

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

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

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

Step 7: Click Save to apply the changes.