Product cards
These settings apply to product cards displayed in sections, as well as on collection and search pages.
| Setting | Description |
|---|---|
| Color scheme | Applying a chosen color scheme to product cards from a suggested list of color schemes automatically updates all associated colors for a cohesive and professional look across your website. |
| Style |
• Standard: This option displays product cards without visible borders or background color on the content container. • Card: This option arranges the image, heading, price, and buttons within a single card with a distinct background from the surrounding section. • Modern: Reveals a separate Button style setting below for the card's action button. |
| Button style | Sets the appearance of the card's action button: Primary, Secondary, or Outline (Default). Only shown when Style is set to Modern. |
| Image padding | Add "Image padding" using the slider. This adds space around your card images. |
| Text alignment |
You have three alignment options for positioning text under a product image or within the product card (heading, price…): • Left • Center • Right Only shown when Style is not set to Modern. |
| Product title text style |
This option controls the capitalization style of product titles: • None — The text is displayed exactly as entered in the admin panel. • Capitalize — Each word starts with a capital letter. • Uppercase — All text is displayed in uppercase letters. |
Style:
- STANDARD
- CARD
- MODERN
Image padding
Price colors
| Setting | Description |
|---|---|
| Regular price |
Sets the color of the regular (non-sale) price text on product cards. • Text (Default) • Secondary text • Accent text |
| Sale (discounted) price |
Sets the color of the discounted price text shown when a product is on sale. • Text (Default) • Secondary text • Accent text |
| Compare-at (old) price |
Sets the color of the crossed-out original price shown next to a sale price. • Text • Secondary text (Default) • Accent text |
| Unit price |
Sets the color of the unit price text (e.g. "$5/100ml"). • Text • Secondary text (Default) • Accent text |
Icons
| Setting | Description |
|---|---|
| Quick view and compare icons border radius | This option allows you to control the border radius of the Quick View and Compare icons. Select the desired value using the slider. |
| Icons color type |
Controls where the icon colors come from. • Default (Default) — uses the theme's built-in icon colors. • Color picker — reveals manual color pickers below for full custom control. |
| Icons color | The icon color (e.g. eye/compare icon glyph). Only shown when Icons color type is Color picker. Default: #F6F2EE. |
| Icons color on hover | The icon color when hovered. Only shown when Icons color type is Color picker. Default: #F6F2EE. |
| Icons background color | The background color behind the icons. Only shown when Icons color type is Color picker. Default: #B72840. |
| Icons background color on hover | The background color behind the icons when hovered. Only shown when Icons color type is Color picker. Default: #B72840. |
| Use custom icons colors for dark mode | Lets you set separate icon colors for dark mode (the four settings below), instead of reusing the light-mode ones. Only shown when dark mode is enabled and Icons color type is Color picker. Disabled by default. |
| Icons color for dark mode | The icon color used in dark mode. Only shown when Use custom icons colors for dark mode is enabled. Default: #F6F2EE. |
| Icons color on hover for dark mode | The icon hover color used in dark mode. Only shown when Use custom icons colors for dark mode is enabled. Default: #F6F2EE. |
| Icons background color for dark mode | The icon background color used in dark mode. Only shown when Use custom icons colors for dark mode is enabled. Default: #B72840. |
| Icons background color on hover for dark mode | The icon background hover color used in dark mode. Only shown when Use custom icons colors for dark mode is enabled. Default: #B72840. |
Border settings
| Setting | Description |
| Corner radius | Use the slider to control the corner shape of product cards. Achieve the desired level of roundness or squareness, aligning them with your design vision. The range is from 0px to 40px. |
| Thickness | Use the slider to adjust thickness of border. The range is from 0px to 10px. |
| Opacity | You can increase or decrease visibility of border color to make it more expressive or less noticeable. The range is from 0% to 100%. |
Thickness and opacity
