Complementary products
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Product type | type | select | complementary | |
| Custom products | product_list | product_list | ||
| Limit | limit | range | 5 | |
| Crop image to ratio | card_image_crop | checkbox | true | |
| Image ratio | card_aspect_ratio | select | 1.0 | |
| Focal point | card_crop_align | select | center center | |
| Custom style | text_custom_style | checkbox | false | |
| Text size (mobile) | text_size_mob | select | text-sm | |
| Text size (desktop) | text_size | select | text-base | |
| Color | text_color_mode | select | base-text | |
| Custom color | text_color_custom | color_background | linear-gradient(to right, #111827, #6b7280) | Solid color or gradient. Shown when Color is set to Custom. |
| Show product compare at price | show_compare_at_price | checkbox | true | |
| Size (mobile) | price_size_mob | select | 1rem | |
| Size (desktop) | price_size | select | 1rem | |
| Size (mobile) | price_compare_size_mob | select | 0.875rem | |
| Size (desktop) | price_compare_size | select | 0.875rem | |
| Custom price color | custom_style | checkbox | false | |
| Price color | price_color | select | base-text | |
| Custom color | price_color_custom | color_background | ||
| Compare-at price color | price_compare_color | select | base-text | |
| Custom color | price_compare_color_custom | color_background | ||
| Variant | button_variant | select | solid | |
| Color | button_color | select | primary | First five options follow the theme colors set in Theme settings. |
| Custom color | button_custom_bg | color_background | #111827 | |
| Custom text color | button_text_color | color | #ffffff | |
| Size | button_size | select | px-4 py-2 text-base | |
| Width | button_width | select | auto | |
| Radius | button_radius | select | rounded-md | |
| Shadow | button_shadow | select | none | |
| Alignment (desktop) | button_alignment | text_alignment | left | |
| Delimiter border height | delimiter_height | range | 2 | |
| Delimiter border color | delimiter_color | color | #e5e7eb | |
| Show in quick buy | show_in_quickbuy | checkbox | true | |
| Block class | class | text |
Option values
- Product type (
type): Complementary products (complementary), Related products (related), Custom products (custom) - 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) - Text size (mobile) (
text_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) - Text size (desktop) (
text_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) - Color (
text_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) - Size (mobile) (
price_size_mob): Extra small (0.75rem), Small (0.875rem), Medium (1rem), Large (1.125rem), Extra large (1.25rem), 2X large (1.5rem), 3X large (1.875rem), 4X large (2.25rem), 5X large (3rem), 6X large (3.75rem) - Size (desktop) (
price_size): Extra small (0.75rem), Small (0.875rem), Medium (1rem), Large (1.125rem), Extra large (1.25rem), 2X large (1.5rem), 3X large (1.875rem), 4X large (2.25rem), 5X large (3rem), 6X large (3.75rem) - Size (mobile) (
price_compare_size_mob): Extra small (0.75rem), Small (0.875rem), Medium (1rem), Large (1.125rem), Extra large (1.25rem), 2X large (1.5rem), 3X large (1.875rem), 4X large (2.25rem), 5X large (3rem), 6X large (3.75rem) - Size (desktop) (
price_compare_size): Extra small (0.75rem), Small (0.875rem), Medium (1rem), Large (1.125rem), Extra large (1.25rem), 2X large (1.5rem), 3X large (1.875rem), 4X large (2.25rem), 5X large (3rem), 6X large (3.75rem) - Price color (
price_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) - Compare-at price color (
price_compare_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) - Variant (
button_variant): Solid (solid), Outline (outline), Ghost (ghost) - Color (
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 (
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) - Width (
button_width): Auto (auto), Full width (full) - Radius (
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 (
button_shadow): None (none), Small (shadow-sm), Medium (shadow), Large (shadow-lg)
Presets
- Complementary products