> For the complete documentation index, see [llms.txt](https://moodboard-creations.gitbook.io/agnes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://moodboard-creations.gitbook.io/agnes/global-sections/product-compare-popup.md).

# Product compare popup

### What It Does

The Product compare popup section lets you customize the product compare popup and product compare bottom sheet.\ <br>

<figure><img src="/files/IcRVfaie2skeNm5ekwIc" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/voazewfVZYnE0Wp0HBTR" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
How to Edit It

1. In the Shopify theme editor, find the **Product compare popup** section in the sidebar.
2. Click on it to expand its settings.
3. Adjust the settings described below to customize its appearance and behavior.
4. Click **Save** to apply your changes.
   {% endhint %}

***

### Settings

#### **Enable in edit mode**

When enabled, the product compare pop-up is displayed in the theme editor.

#### **Style**

Controls the Style. Choose from: Full screen, Boxed.

#### **Number of products to compare**

Controls the Number of products to compare in the product compare pop-up.

#### **Heading**

The title text displayed in the product compare pop-up.

#### **Heading font size**

Controls the text size. Choose from: Heading 6, Heading 5, Heading 4, Heading 3, Heading 2, Heading 1.

#### **Horizontal alignment**

Controls the horizontal alignment in the product compare pop-up.

**Product compare bottom sheet**

Configure the settings for the Product compare bottom sheet.

#### **Enable in edit mode**

When enabled, the product compare bottom sheet is displayed in the theme editor.

#### **Product padding**

Adjusts the spacing around each product in the product compare bottom sheet.

#### **Product border width**

Sets the border thickness for each product in the product compare bottom sheet.

#### **Product border radius**

Rounds the corners of each product in the product compare bottom sheet.

#### **Product shadow**

Adds a shadow effect to each product for visual depth.

#### **Enable inner card color**

When enabled, an inner card color is shown for each product in the product compare bottom sheet. Disable it to hide it.

#### **Header color scheme**

Applies a predefined color scheme to the header of the product compare bottom sheet.

{% hint style="info" %}
Color schemes are sets of coordinated colors you define under **Theme settings > Colors**. Choosing a scheme applies its background, text, and accent colors.
{% endhint %}

#### Content color scheme

Applies a predefined color scheme to the content of the product compare bottom sheet.

#### **Button color scheme**

Controls the Button color scheme. Choose from: Primary, Secondary.

***

## Supported Blocks

### Vendor

See the child document for full settings: [Vendor](/agnes/global-sections/product-compare-popup/vendor.md)

### Product title

See the child document for full settings: [Product title](/agnes/global-sections/product-compare-popup/title.md)

### Subheading

See the child document for full settings: [Subheading](/agnes/global-sections/product-compare-popup/subheading.md)

### Border

See the child document for full settings: [Border](/agnes/global-sections/product-compare-popup/border.md)

### Price

See the child document for full settings: [Price](/agnes/global-sections/product-compare-popup/price.md)

### Product media

See the child document for full settings: [Product media](/agnes/global-sections/product-compare-popup/product_media.md)

### Product description

See the child document for full settings: [Product description](/agnes/global-sections/product-compare-popup/description.md)

### 'View product' link

See the child document for full settings: ['View product' link](/agnes/global-sections/product-compare-popup/link.md)

### 'Add to cart' button

See the child document for full settings: ['Add to cart' button](/agnes/global-sections/product-compare-popup/button.md)

### Variant selector

See the child document for full settings: [Variant selector](/agnes/global-sections/product-compare-popup/variant.md)

### Product tags

See the child document for full settings: [Product tags](/agnes/global-sections/product-compare-popup/tags.md)

### Product badge

See the child document for full settings: [Product badge](/agnes/global-sections/product-compare-popup/badge.md)

### Product type

See the child document for full settings: [Product type](/agnes/global-sections/product-compare-popup/product_type.md)

### Custom field

See the child document for full settings: [Custom field](/agnes/global-sections/product-compare-popup/custom_field.md)