Overview

The Product Card controls the visual design, layout, and interactive behavior of each product item within the bundle.

It defines how product images, structure, and card styling appear to users.

Purpose

• Design the visual appearance of product cards
• Control image behavior and layout
• Enhance user interaction (hover, quick view, selection)
• Maintain consistent UI across all products

General Settings

Show Quick View

Enables a quick view button on product cards for fast product preview.

Image Ratio

Defines the aspect ratio of product images (e.g., square 1:1).

Image Display

Controls how images are shown:

• Single image
• Slider (multiple images)

Show Hover Image

Displays a secondary image when hovering over the product.

Image Fit

Controls how the image fits inside its container:

• Cover → fills container
• Contain → fits within bounds

Product Card Style

Card Layout

Defines structure of the card:

• Vertical → Image on top, content below
• (Other layouts may be supported)

Border Style

Controls card border type (none, solid, etc.)

Border Color

Defines color of the card border.

Background Color

Sets the main background of the product card.

Box Shadow

Adds shadow around the card for depth.

Contents Background

Controls background of inner content area (text section).

Image Styling

Image Border Style

Defines border style around the image.

Image Border Color

Controls image border color.

Image Background

Sets background color behind the image.

Image Box Shadow

Adds shadow specifically to the image container.

Interaction States

Hover Effect

Controls visual effect when hovering on product card.

Hover Border Color

Defines border color on hover state.

Selected Border Color

Defines border color when product is selected.

Selected Badge

Background Color

Sets background color of selected badge.

Text Color

Defines text color inside selected badge.

Purpose

Indicates selected products clearly within the bundle.

Behavior

• Styling applies to all product cards globally
• Updates instantly in preview
• Fully synced across:
  • Editor preview
  • Storefront
  • Bundle page

Responsive Behavior

Desktop

• Full hover effects and layout visible

Mobile

• Hover effects may be reduced
• Layout adjusts for touch interaction

Best Practices

• Use consistent image ratio across all products
• Keep card design clean and minimal
• Use hover effects subtly
• Ensure clear selection state visibility
• Maintain strong contrast for readability

Summary

The Product Card defines the core visual identity of products inside the bundle, including:

• Image behavior
• Card layout
• Styling and colors
• Interaction states (hover, selected)

A well-designed product card improves:

• Product visibility
• User interaction
• Overall conversion rate