Product compare popup

What It Does

The Product compare popup section lets you customize the product compare popup and product compare bottom sheet.

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.

---

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.

Color schemes are sets of coordinated colors you define under Theme settings > Colors. Choosing a scheme applies its background, text, and accent colors.

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

Product title

See the child document for full settings: Product title

Subheading

See the child document for full settings: Subheading

Border

See the child document for full settings: Border

Price

See the child document for full settings: Price

Product media

See the child document for full settings: Product media

Product description

See the child document for full settings: Product description

'View product' link

See the child document for full settings: 'View product' link

'Add to cart' button

See the child document for full settings: 'Add to cart' button

Variant selector

See the child document for full settings: Variant selector

Product tags

See the child document for full settings: Product tags

Product badge

See the child document for full settings: Product badge

Product type

See the child document for full settings: Product type

Custom field

See the child document for full settings: Custom field