Collection card
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Collection | collection | collection | ||
| Image (override) | image | image_picker | ||
| Subheading | subheading | text | ||
| Button label | button_label | text | ||
| Variant | card_button_variant | select | outline | |
| Color | card_button_color | select | secondary | First five options follow the theme colors set in Theme settings. |
| Custom color | card_button_custom_bg | color_background | #111827 | |
| Custom text color | card_button_text_color | color | #ffffff | |
| Size | card_button_size | select | px-4 py-2 text-base | |
| Radius | card_button_radius | select | rounded-md | |
| Shadow | card_button_shadow | select | none | |
| Button width | card_button_width | select | auto | |
| Image ratio | card_aspect_ratio | select | 1.0 | |
| Crop image to ratio | card_crop | checkbox | true | |
| Focal point | card_crop_align | select | center center | Used to keep the subject of your image in view, when cropped to a fixed shape |
| Show product count | card_show_count | checkbox | true | |
| Title size (mobile) | card_title_size_mob | select | text-sm | |
| Title size (desktop) | card_title_size | select | text-base | |
| Title color | card_title_color_mode | select | heading-text | |
| Title custom color | card_title_color | color | #111827 | |
| Text alignment | card_text_align | text_alignment | center | |
| Overlay style | card_overlay | select | below | |
| Overlay background | card_overlay_bg | color_background | linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8) 100%) | |
| Overlay vertical | card_overlay_align | select | center |
Option values
- Variant (
card_button_variant): Solid (solid), Outline (outline), Ghost (ghost) - Color (
card_button_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) - Size (
card_button_size): 3 Extra Small (px-2 py-1 text-3xs), 2 Extra Small (px-2 py-1 text-2xs), Extra Small (px-2 py-1 text-xs), Small (px-3 py-1.5 text-sm), Medium (px-4 py-2 text-base), Large (px-5 py-2.5 text-lg), Extra Large (px-6 py-3 text-xl), 2X Large (px-8 py-4 text-2xl), 3X Large (px-10 py-5 text-3xl), 4X Large (px-15 py-6 text-4xl), 5X Large (px-15 py-7 text-5xl), 6X Large (px-20 py-8 text-6xl), 7X Large (px-20 py-10 text-7xl), 8X Large (px-20 py-10 text-8xl), 9X Large (px-20 py-10 text-9xl) - Radius (
card_button_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_button_shadow): None (none), Small (shadow-sm), Medium (shadow), Large (shadow-lg) - Button width (
card_button_width): Auto (auto), Full width (full) - 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) - Focal point (
card_crop_align): Top left (top left), Top center (top center), Top right (top right), Middle left (center left), Middle center (center center), Middle right (center right), Bottom left (bottom left), Bottom center (bottom center), Bottom right (bottom right) - 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 (
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) - Overlay style (
card_overlay): Text below (below), Over - Tint (over-full), Over - Box (over-box), Over - Text shadow (over-shadow), Over - Text shadow and tint (over-full-shadow), Over - No background (over-none) - Overlay vertical (
card_overlay_align): Top (top), Center (center), Bottom (bottom)