# 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-**

<table><thead><tr><th width="276"></th><th></th></tr></thead><tbody><tr><td>Desktop content width</td><td>Choose the width from following options:<br>-Small  -Medium  -Large</td></tr><tr><td>Heading</td><td>Enter the heading text.<br><em>(<strong>Note</strong>: Make text bold to show highlight font and add ++ for line break. Use [Text1,Text2,Text3] to create a rotating text.)</em></td></tr><tr><td>Highlight font</td><td>Choose the highlight font family from below options:<br>- Body<br>- Heading<br>- Accent</td></tr><tr><td>Heading tag</td><td>Specify heading code types for SEO and search engines for crawling purposes.</td></tr><tr><td>Heading size</td><td>Choose the heading size from h1 to h6.</td></tr><tr><td>Description</td><td>Enter the description text.</td></tr><tr><td>Text alignment</td><td>Choose the text alignment from below options:<br>- Left<br>- Center<br>- Right</td></tr><tr><td>Color: Background</td><td>Choose the color scheme from available list of schemes.</td></tr><tr><td>Button size: Desktop and Mobile</td><td>Choose the button size from below options, for desktop &#x26; mobile:<br>- Default<br>- Small<br>- Medium<br>- Large</td></tr><tr><td>Section visibility</td><td>Choose the visibility from below options:<br>- Always<br>- Small devices only<br>- Large devices only</td></tr><tr><td>Section spacing</td><td>Adjust the range bar to determine the section spacing on top and bottom for desktop and mobile.</td></tr></tbody></table>

**Block settings: Compare product**

<table><thead><tr><th width="277"></th><th></th></tr></thead><tbody><tr><td>Product</td><td>It selects the closest product by default on <strong>Product page</strong>, but for any other page, users need to select the product.<br><br><em>(Note: On the PDP, if you want content to be dynamic (different for each product), you need to create metaobjects for every block field.)</em></td></tr><tr><td>Show title</td><td>Select this checkbox to show the selected product's title.</td></tr><tr><td>Show description</td><td>Select this checkbox to show the selected product's description.</td></tr><tr><td>Show price</td><td>Select this checkbox to show the selected product's price.</td></tr><tr><td>Enable quick view</td><td>Select this checkbox to show the selected product's quick view.</td></tr><tr><td>Enable product link</td><td>Select this checkbox to show the selected product's link i.e. View detailsImage.</td></tr></tbody></table>

**Custom content**

<table><thead><tr><th width="278"></th><th></th></tr></thead><tbody><tr><td>Image</td><td>Choose any image for the product highlight or feature.</td></tr><tr><td>Heading</td><td>Add the feature title.</td></tr><tr><td>Content</td><td>Add the feature content.</td></tr></tbody></table>

**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](https://help.shopify.com/en/manual/custom-data/metafields)

{% file src="/files/DVvMKdacoLZ0DXnq2jOd" %}

{% file src="/files/wbZZq5IGRU47Emg45fXz" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shinedezign.gitbook.io/yuva-knowledgebase/sections/how-to-setup-the-product-comparison-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.