Compare Product

What is the Compare Product section?

Have you ever heard of the anchoring effect? Also known as Anchoring Bias

This effect explains how the first piece of information we receive (the "anchor") heavily influences our subsequent decisions. In marketing and sales, the product price that first appears in a customer's mind becomes a fixed threshold for judging the price of the next product.

Marketers will anchor the first product's price very high to make the next product's price seem cheap and reasonable in comparison. The buyer will feel like they got a bargain and be excited about their purchase, not realizing that it's a marketing tactic playing on their psychology to drive a quick purchasing decision.

If you want to sell the second or third product, you should set the price of the first product very high and the remaining products cheaper, so they will compare and consider buying the more affordable and reasonably priced option.

That is why we created this section - Compare Product to help you apply this psychological trick more effectively. We have created a comparison table between products that includes prices, product images, and descriptions. It allows you to highlight the product you want to sell, complete with labels for each product to attract attention more easily.

Click here to see the link demo ->

How To Install The Compare Product?

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

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

Step 3: Now you can customize for the layout, media, content, color and spacing of this section

General Settings

  • Container full-width: When enabled, this option makes the section's content span the entire width of the browser window.

  • Enable spacing between items: This toggle, when active, adds space or gaps between the product columns.

  • Subheading: A text field for an optional, smaller title.

  • Heading: The main title for the section.

  • Heading size: Controls the font size of the main heading.

  • Description: A rich text editor for a longer introductory text. T

  • Heading alignment: Sets the horizontal alignment for the Subheading, Heading, and Description.

  • Number of columns on desktop: Determines how many products are shown in a single row on desktop screens.

  • Enable swipe on mobile: When turned on, this allows users on mobile devices to swipe horizontally to view the product columns, which is useful when the number of columns doesn't fit the screen width.

  • Content alignment: Aligns the content (text, price, button) within each product column.

  • Product name size: Sets the font size for the product titles.

  • Price size: Sets the font size for the product prices.

  • Icon: A dropdown to select a predefined icon.

  • Upload icon: Provides an option to select a custom image to be used as an icon.

  • Icon size: A slider to adjust the size of the icon in pixels.

  • Use content container style from theme settings: When enabled, this would apply default styling like borders or background colors from the main theme settings to the content area.

  • Media ratio: Sets the aspect ratio for the product images.

  • Media shape: Defines the shape of the product images.

  • Show "View detail" button: A toggle to display or hide the button on each product card. It is currently enabled.

  • Button style: Determines the visual appearance of the button.

  • Button full-width: A toggle that, when enabled, makes the button span the full width of the product column. It is currently disabled.

  • Section color scheme: Applies a preset of colors to elements like the border and shadow of the product cards.

  • Content color scheme: Applies a color scheme to the text and other content within the section.

  • Top padding: Controls the amount of empty space above the section's content.

  • Bottom padding: Controls the amount of empty space below the section's content.

Block Settings - Compare Product

  • Product: This is a selection field that allows you to search for and choose a specific product from your store's catalog.

  • Content: This is a rich text editor where you can input key features or specifications.

  • Plant name: This field is for the text that will appear on the badge

  • Background: This is a color picker to set the background color of the badge.

  • Label: This is a color picker for the text color of the badge.

Last updated