1. What is Product comparison grid?
Product comparison grid is a section that displays multiple products in a side-by-side grid layout, allowing customers to easily compare product information such as price, description, vendor, variants, ratings, and more.
This section is ideal for:
- Comparing similar products
- Showing differences between models or versions
- Helping customers make faster buying decisions
2. Section Components
| Section | Product comparison grid | Display multiple products in a grid so customers can compare their information side by side. |
|---|---|---|
| Available blocks | Product description | Used to display each product’s description. |
| Variant option | Used to display selectable product variants (such as size or color). | |
| Button | Used to add a custom call-to-action button. | |
| Product ratings | Used to display product star ratings. | |
| SKU | Used to display product SKU. | |
| Vendor name | Used to display the product vendor. | |
| Product metafield | Used to display custom product information using metafields. | |
| "Add to cart" Button | Used to add an Add to cart button for each product. |
3. Location & Setup
To add and set up the Product comparison grid section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Decide where you want to place the new section.
- Click "Add Section".
- Select "Product comparison grid".
4. Highlight Features
- Side-by-side product comparison: Products are displayed in columns so customers can quickly compare information across items.
- Flexible product information: Choose which blocks (description, vendor, SKU, metafields, etc.) appear in the grid.
- Variant selection inside grid: Allow customers to select variants directly in the comparison layout.
- Built-in add to cart: Customers can add products to cart without leaving the comparison section.
-
Supports custom data: Use Product metafield blocks to display unique specifications or attributes.
5. Common Use Cases
🤔 How to set up the Product comparison grid section?
Want to create a comparison grid using standard product information such as description, vendor, SKU, ratings, variants, and Add to cart?
Here’s how:
STEP 1: Add the section
At your desired position, click "Add section" and choose the Product comparison grid section.
STEP 2: Choose the products to compare
- Click on the Product comparison grid to open its settings panel.
- Scroll down and find the Grid setting.
- Click Select products and choose up to 10 products you want to compare.
STEP 3: Add the information you want to compare
Each block under the Product comparison grid section represents a piece of information.
Depending on your needs, add, setup and arrange the blocks' position:
- Product description
- Variant option
- Product ratings
- SKU
- Vendor name
- "Add to cart" Button
- Button
STEP 4: Fine-tune the overall section layout:
Go back to the Product comparison grid setting panel, and:
- Enter a new Subheading and Heading.
- Adjust the Section layout: width, padding, etc.
For more detailed customization options, you can read the instructions in the last part.
STEP 5: Click “Save” when done.
🤔 How to show custom product specs in the comparison table using Product metafield?
You might want to show the information that is beyond the basic options from Shopify. (For example: battery life, technical specs, etc.)
That's totally possible in Maximize. Here's how:
1️⃣ Part A – Create a product metafield in Shopify Admin
STEP 1: Go to Shopify Admin → Settings → Metafields and metaobjects → Products → Click Add definition.
STEP 2: Set:
- Name: e.g., Battery capacity
- Choose One value or List of values (depends on your information type)
- Choose the appropriate Type (single line text, number, etc.)
⚠️ Note: Remember & copy the Namespace and key - we will use it later.
STEP 3:
Click Save.
Still unclear? Try creating a product metafield here 👇
2️⃣ Part B – Assign value to the created product metafield
Open a product in Shopify Admin and enter a value for this metafield.
See the steps in more detail here 👇
3️⃣ Part C – Display the metafield in Product comparison grid
STEP 1:
Go to Theme Editor, add or open the Product comparison grid section.
STEP 2:
Add a Product metafield block.
STEP 3:
In Metafield key, enter the Namespace and key you created during Part A - step 2 above.
(e.g., custom.battery_capacity).
STEP 4:
Change the Title if you want a custom label.
STEP 5:
Choose Background (light) and Background (dark) if needed.
STEP 6:
Click "Save".
🤔 What other customization options can you give your Product comparison grid?
| For the whole Product comparison grid section: | |
|
✨ Add a highlight effect between the text |
Click on the Product comparison grid section,
|
|
✨Add an extra button right below the heading |
Click on the Product comparison grid section:
|
|
✨Adjust the width, the padding, or add a divider line for the section |
Click on the Product comparison grid section:
|
|
For the Product Grid inside the section |
|
|
✨Change the text shown when there is an empty value (default is "-") |
Click on the Product comparison grid section > Go to Grid > Change the Text to use for empty fields. |
|
✨ Adjust the width for each product column |
Click on the Product comparison grid section > Go to Grid > Change the Column width |
|
✨ Show the product labels & badges for your product |
Click on the Product comparison grid section > Go to Grid > Turn on Show product labels and badges. ⚠️ Note: Your labels and badges must be set up before, as guided in this guide.
|
|
✨ Show an "Add to cart" button right below the product image |
Click on the Product comparison grid section > Go to Grid and:
|
6. Support Information
Need help? Contact our support team at Omni Themes Support
