Theme Settings - Product Card Swatches

Product Card Swatches

Controls the display and behavior of variant swatches on product cards.

Enable Product Card Swatches

Enables variant swatches on product cards.

• When enabled, variant options are displayed directly on product cards
• Performance note: Enabling this feature adds JavaScript to all pages. Consider disabling if page speed is critical

Lazy Load Variant Images

Controls lazy loading behavior for variant images used in swatches.

• Improves performance by loading images only when needed

Variant Option Name

Defines which product option is used for swatches.

• Example: Color   
• Must match the product variant option name

Default Variant Swatch Map Metaobject

Specifies the default metaobject used for variant swatch mapping.

• Used to map variants to colors or images
• Can be overridden per product using a metafield

Swatch Shape

Controls the shape of swatches displayed on product cards.

• Circle
• Square

Swatch Size

Defines the size of each product variant swatch in pixels.

Swatch size can be customized separately for desktop and mobile.

Swatch Size for Desktop

Controls the swatch size on desktop devices.

Value is in px.

Example:

• 18px   → Default balanced size
• 22px+   → More visible, bold style
• 14px–16px   → Compact layout

Swatch Size for Mobile

Controls the swatch size on mobile devices.

Value is in px.

Recommended:

• Slightly smaller than desktop
• Helps prevent layout overflow on small screens

Variant Swatch Type

Controls how swatches are displayed.

• Color – Displays color-based swatches
• Image – Displays image-based swatches