How to enable Color Comparison on product page?

The "Color Comparison" block displays a trigger button that opens a popup modal allowing customers to visually compare different color variants of a product side by side.

The block only appears when the product has multiple color options defined in the theme's swatch settings. It supports typography customization for the trigger button and custom padding.

How to enable Color Comparison on product page?

• From your Shopify admin, go to Online Store -> Themes.

• Find the theme that you want to edit, and then click Customize.

• Choose Products from the dropdown window.

• Click Product information -> add Perks block (if not already added).

• By default, the Block Perk will be added to 3 corresponding functional blocks (Size chart, Color Comparison, Ask An Expert). You can enable or disable them at will by hiding them if you don't want to use them.

  (In this example, we are setting up Color Comparison)

Color Comparison Block - Settings Guide

Setting	Type	Description
Text	text	Text content displayed on the popup trigger button
Preset	select	Typography preset (Default, Paragraph, H1-H6, Custom)
Font	select	Font family (Body, Subheading, Heading) — Visible when Preset is Custom
Size	select	Font size (from 10px to 120px) — Visible when Preset is Custom
Line Height	select	Line height (Tight, Normal, Loose) — Visible when Preset is Custom
Letter Spacing	select	Letter spacing (Tight, Normal, Loose) — Visible when Preset is Custom
Case	select	Text case (Default, Uppercase, Capitalize) — Visible when Preset is Custom
Wrap	select	Text wrap style (Pretty, Balance, None) — Visible when Preset is Custom
Color	select	Text color (Text, Heading, Link) — Visible when Preset is not RTE
Top	range	Top padding (0-100px)
Bottom	range	Bottom padding (0-100px)
Left	range	Left padding (0-100px)
Right	range	Right padding (0-100px)