HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Combined listings app
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How It Works 🚀
  • How to enable Product compare feature
  • How to edit Product compare
  • Best practices ✅
  1. Page's global sections

Product compare

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

PreviousPopupNextQuick view

Last updated 3 months ago

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:

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

Product compare