✨How to setup the Product Comparison Grid
A product comparison grid that clearly highlights the key differences between related products. Perfect for showcasing specifications, ingredients, usage, or benefits, especially for industries such as skincare, electronics, wellness, and supplements. Section settings-
Desktop content width
Choose the width from following options: -Small -Medium -Large
Heading
Enter the heading text. (Note: Make text bold to show highlight font and add ++ for line break. Use [Text1,Text2,Text3] to create a rotating text.)
Highlight font
Choose the highlight font family from below options: - Body - Heading - Accent
Heading tag
Specify heading code types for SEO and search engines for crawling purposes.
Heading size
Choose the heading size from h1 to h6.
Description
Enter the description text.
Text alignment
Choose the text alignment from below options: - Left - Center - Right
Color: Background
Choose the color scheme from available list of schemes.
Button size: Desktop and Mobile
Choose the button size from below options, for desktop & mobile: - Default - Small - Medium - Large
Section visibility
Choose the visibility from below options: - Always - Small devices only - Large devices only
Section spacing
Adjust the range bar to determine the section spacing on top and bottom for desktop and mobile.
Block settings: Compare product
Product
It selects the closest product by default on Product page, but for any other page, users need to select the product. (Note: On the PDP, if you want content to be dynamic (different for each product), you need to create metaobjects for every block field.)
Show title
Select this checkbox to show the selected product's title.
Show description
Select this checkbox to show the selected product's description.
Show price
Select this checkbox to show the selected product's price.
Enable quick view
Select this checkbox to show the selected product's quick view.
Enable product link
Select this checkbox to show the selected product's link i.e. View detailsImage.
Custom content
Image
Choose any image for the product highlight or feature.
Heading
Add the feature title.
Content
Add the feature content.
How to setup via metafields: Create metafields and then add enteries from the product specific page, as shown below: For more details, please refer to Shopify Metafileds
Last updated