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


---

# 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://moodboard-creations.gitbook.io/agnes/global-sections/product-compare-popup.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.