> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/yuva-knowledgebase/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shinedezign.gitbook.io/yuva-knowledgebase/sections/how-to-setup-the-product-comparison-grid.md).

# 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" %}