Product compare

Help customers make informed decisions by comparing products side-by-side

Product compare feature is a powerful tool to enhance customers' shopping experience. By allowing customers to compare products side-by-side, it simplifies decision-making and boosts confidence in their purchases. 🎯

---

How It Works 🚀

This feature is only available on Collection pages.

A Compare button is displayed at the top of the product listing. Customers can select products for comparison.

How to enable Product compare feature

Steps:

1. In the theme editor (Customize), go to Theme settings.

2. Select Product compare.

3. Click Enable product compare option and set Max products in compare (2-15 products).

4. Save the changes.

Learn more:

Product compare

How to edit Product compare

Steps:

1. In the theme editor (Customize), locate Overlay group > Product compare

2. Customize the comparison modal by editing its blocks.

Supported blocks in the Product compare modal:

• Product Info 🛍️: Display the product name and any a View details button. The View details button direct customer to the product details page.

• Description ✍️: Highlight the product's unique features. You can enable text line limit to the content to keep it short.

• Price 💰: Show product pricing.

• Vendor 🏷️: Mention the product brand or supplier.

• Type 🛠️: Indicate the product category.

• Product Variants 🔄: If needed, show variant-related details.

You can:

• Drag blocks to re-order them for a better comparison experience.

• Remove blocks if they are not necessary for your product comparison.

Best practices ✅

• Keep it simple: Show only the most important details to avoid overwhelming customers.

• Highlight differences: Ensure fields like price, type, or description are clear to help customers spot differences.

• Limit comparisons: For the best user experience, keep the maximum number of products compared to 3–5. Too many items might confuse shoppers. 🤯