Product card
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Product | product | product | ||
| Background | card_bg | color_background | #ffffff | |
| Border width | card_border_width | range | 1 | |
| Border color | card_border_color | color | #e5e7eb | |
| Corner radius | card_radius | select | rounded-2xl | |
| Shadow | card_shadow | select | none | |
| Padding | card_padding | range | 4 | Tailwind spacing scale 0-10 (1 = 4px, 10 = 40px). Uniform padding on all sides. |
| Hover effect | card_hover | select | up | |
| Hover shadow | card_hover_shadow | select | sm | |
| Hover background | card_bg_hover | color_background | #ffffff | |
| Display mode | card_image_mode | select | swap | Carousel: hovering the card auto-advances every 2 seconds with a progress bar, looping until the pointer leaves. |
| Image ratio | card_aspect_ratio | select | 1.0 | |
| Image shape | card_image_shape | select | rounded-none | |
| Card content order | card_body_order | text | Slash-separated tokens to show and order: vendor/title/star/variant/subtitle/price/buy. Delete a token to hide that element; reorder freely. Leave blank for the default (title/price/buy). | |
| Content class | card_content_class | text | Extra classes for the text content wrapper, e.g. px-4 to inset content when Card padding is 0. Leave blank for none. | |
| Show empty stars when there are no reviews | card_star_show_when_empty | checkbox | false | When a product has no rating yet, show five empty stars instead of hiding the star row. Needs the star token in Card content order. |
| Buy button | card_buy_button | select | cart | |
| Align buy button to card bottom | card_buy_align_bottom | checkbox | false | Stretches every card in the row so all buy buttons line up along the bottom edge. |
| Swatch size | card_variant_swatch_size | range | 50 | |
| Swatch shape | card_variant_swatch_shape | select | rounded-circle | |
| Show swatch border | card_variant_swatch_border | checkbox | true | Draws a border around each swatch using its own color, with a thin white ring separating the border from the color fill. Falls back to a neutral gray when a swatch has no color (image-only). |
| Variant pills limit | card_variant_limit | range | 5 | |
| Variant pill shape | card_variant_pill_shape | select | rounded-full | |
| Show color swatches only | card_variant_swatch_only | checkbox | false | Hides non-color option rows (e.g. size) so the variant area shows only the color swatches. Color options follow the theme's Swatch settings; products without a swatch option show no variants. |
| Text align | card_text_align | text_alignment | left | |
| Title size (mobile) | card_title_size_mob | select | text-sm | |
| Title size (desktop) | card_title_size | select | text-base | |
| Title color (color) | card_title_color_mode | select | heading-text | |
| Title color (custom) | card_title_color | color | ||
| Subtitle size (mobile) | card_subtitle_size_mob | select | text-sm | |
| Subtitle size (desktop) | card_subtitle_size | select | text-base | |
| Subtitle color (color) | card_subtitle_color_mode | select | heading-text | |
| Subtitle color (custom) | card_subtitle_color | color | ||
| Price size (mobile) | card_price_size_mob | select | text-sm | |
| Price size (desktop) | card_price_size | select | text-base | |
| Price color (color) | card_price_color_mode | select | base-text | |
| Price color (custom) | card_price_color | color | ||
| Compare-at price color (color) | card_price_compare_color_mode | select | gray-400 | |
| Compare-at price color (custom) | card_price_compare_color | color | ||
| Variant size (mobile) | card_variant_size_mob | select | text-xs | |
| Variant size (desktop) | card_variant_size | select | text-xs | |
| Variant color (color) | card_variant_color_mode | select | base-text | |
| Variant color (custom) | card_variant_color | color | ||
| Star color | card_star_color | select | warning | |
| Custom color | card_star_color_custom | color | ||
| Button style | card_buy_style | select | solid | |
| Color | card_buy_color | select | primary | |
| Custom color | card_buy_custom_bg | color_background | ||
| Custom text color | card_buy_text_color | color | #ffffff | |
| Full width (100%) | card_buy_full_width | checkbox | false | |
| Button radius | card_buy_radius | select | rounded-md | |
| Button size | card_buy_size | select | text-sm | |
| Labels order | card_labels | text | new/reduction/hot/sold-out/pre-order/refurbished/tiered-pricing/bulk-order | All labels: new/reduction/hot/sold-out/pre-order/refurbished/tiered-pricing/bulk-order. Slash separated. Sort freely or delete any you don't want. |
| Position | card_labels_position | select | top-start | Where the label stack sits over the card image. |
| Style | card_labels_schema | select | solid | |
| Shape | card_labels_shape | select | rounded-md | Same 32-shape vocabulary as the button blocks. |
| Size | card_labels_size | select | md | |
| Hot method | card_labels_hot_method | select | tag | Collection: product in a collection whose handle contains 'hot'. Tag: product has the tag 'Hot sale'. Always: always show. |
| Reduction type | card_reduction_type | select | percent | |
| New arrival method | card_new_method | select | tag | Collection: product in a collection whose handle contains 'new'. Tag: product has the tag 'New'. Date: created within the limit below. |
| New arrival date limit | card_new_limit | range | 7 | Label shows if the product was created within this many days |
| Position | card_themelabel_position | select | disabled | |
| Style | card_themelabel_style | select | solid | |
| Shape | card_themelabel_shape | select | rounded-full | |
| Size (mobile) | card_themelabel_size_mob | range | 11 | |
| Size (desktop) | card_themelabel_size | range | 14 | |
| Color | card_themelabel_color | select | primary | |
| Custom color | card_themelabel_bg | color_background | #f3f4f6 | Shown when Color = Custom. Supports solid or gradient colors. |
| Custom text color | card_themelabel_text_color | color | #111827 | Shown when Color = Custom. |
| Tag class | card_themelabel_class | text | ||
| Show inventory | card_show_inventory | checkbox | false | |
| Show notice | card_inventory_notice | select | low | |
| Show count | card_inventory_count | select | low | |
| Low inventory threshold | card_inventory_threshold | range | 10 |
Option values
- Corner radius (
card_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Shadow (
card_shadow): None (none), Small (sm), Medium (md), Large (lg) - Hover effect (
card_hover): None (none), Lift up (up), Lift down (down), Scale up (scale_up), Scale down (scale_down) - Hover shadow (
card_hover_shadow): None (none), Small (sm), Medium (md), Large (lg) - Display mode (
card_image_mode): Single image (single), Swap to 2nd image on hover (swap), Carousel all images on hover (carousel) - Image ratio (
card_aspect_ratio): Auto (``), Custom (3:1) (3.0), Ultrawide (21:9) (2.33), Double-width (2:1) (2.0), Widescreen/HD (16:9) (1.78), Classic/DSLR (3:2) (1.5), ISO Paper (1.4:1) (1.4), Standard Definition/SD (4:3) (1.33), Landscape (5:4) (1.25), Square (1:1) (1.0), Instagram Portrait (4:5) (0.8), Portrait Photography (3:4) (0.75), Pinterest Pin Ratio (2:3) (0.67), Portrait (9:16) (0.56) - Image shape (
card_image_shape): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Buy button (
card_buy_button): Quick view (quick), View details (details), Add to cart (cart) - Swatch shape (
card_variant_swatch_shape): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Variant pill shape (
card_variant_pill_shape): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Title size (mobile) (
card_title_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Title size (desktop) (
card_title_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Title color (color) (
card_title_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Subtitle size (mobile) (
card_subtitle_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Subtitle size (desktop) (
card_subtitle_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Subtitle color (color) (
card_subtitle_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Price size (mobile) (
card_price_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Price size (desktop) (
card_price_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Price color (color) (
card_price_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Compare-at price color (color) (
card_price_compare_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Variant size (mobile) (
card_variant_size_mob): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Variant size (desktop) (
card_variant_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Variant color (color) (
card_variant_color_mode): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Star color (
card_star_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Button style (
card_buy_style): Solid (solid), Outline (outline), Ghost (ghost) - Color (
card_buy_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Button radius (
card_buy_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Button size (
card_buy_size): 3 Extra Small (text-3xs), 2 Extra Small (text-2xs), Extra Small (text-xs), Small (text-sm), Medium (text-base), Large (text-lg), Extra Large (text-xl), 2X Large (text-2xl), 3X Large (text-3xl), 4X Large (text-4xl), 5X Large (text-5xl), 6X Large (text-6xl), 7X Large (text-7xl), 8X Large (text-8xl), 9X Large (text-9xl) - Position (
card_labels_position): Top, left to right (top-start), Top, right to left (top-end), Left, top to bottom (side-start), Right, top to bottom (side-end) - Style (
card_labels_schema): Solid (solid), Outline (outline), Soft (soft) - Shape (
card_labels_shape): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Size (
card_labels_size): Small (sm), Medium (md), Large (lg) - Hot method (
card_labels_hot_method): Collection (collection), Tag (tag), Always (always) - Reduction type (
card_reduction_type): Percent (percent), Value (value) - New arrival method (
card_new_method): Collection (collection), Tag (tag), Date (date) - Position (
card_themelabel_position): Disabled (disabled), Below image (below-image), Below product vendors (below-vendor), Below product title (below-title), Below product subtitle (below-subtitle), Below product price (below-price), Below product variant swatches (below-variant), Below reviews rating (below-star), Below inventory label (below-inventory) - Style (
card_themelabel_style): Solid (solid), Outline (outline), Ghost (ghost) - Shape (
card_themelabel_shape): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Color (
card_themelabel_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom) - Show notice (
card_inventory_notice): Low only (low), Always (always) - Show count (
card_inventory_count): Never (never), Low only (low), Always (always)
Presets
- Product card