Hyper Theme
Hyper Theme
Pages Global Sections

Product compare

2 min read

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.

image

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

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. 🀯
Last updated