Product cards
| Setting | Description |
| Style |
|
| 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 (type, heading, price, color swatches…):
|
| Heading font family: |
In Theme Settings, the heading can have a different font family from the body text. You can apply one of these styles to the title on product cards. For some headings, it may be better to apply the body text style as the title on product or collection cards. |
| Color variant name | This option is designed for color swatches. In certain sections, such as the Featured Collection, you'll find the “Show Color Variants” option. Enabling this will make the color swatches visible. In the Color Variant Name field, ensure you enter the name of the variant option, such as “Color.” It should match exactly as it appears in the Product Detail Page in the Shopify Admin Variants section. |
| 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. |
Color swatches on product cards
Three steps to show:
- Create color variant
- Add name into “Color variant name” field in Product cards tab of theme settings
- Navigate to section where color swatches should be displayed, and enable “Show color variants” option
Button settings
| Setting | Description |
| Button style (For “Add to cart” button) | In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings in color scheme settings. These color sets allow you to style buttons consistently across your store. |
| Button outline (For “Add to cart” button) | None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look. Outline: The button has a visible border around it, but the background is transparent. Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent. |
| Quick add button style | Read explanation about the styles in a first row of the table:
In each section, you have option to enable or disable this button. It is the second button on product card to open the Quick view pop-up. |
| Quick add button outline | Read explanation about in the second row of the table:
In each section, you have option to enable or disable this button. It is the second button on product card to open the Quick view pop-up. |
Compare button
| Setting | Description |
| Enable button | Enabling this option allows users to interact with the compare products pop-up to easily compare selected items. |
| Outline | Choose color for border using the color picker or by entering a HEX code. |
| Background hover | Select a background color in hover using the color picker or by entering a HEX code. |
| Text color | Select the text color in hover using the color picker or by entering a HEX code. |
Border settings
Customize the appearance of your border:
| Setting | Description |
| Thickness | Use the slider to adjust thickness of border. The range is from 0px to 24px. |
| Opacity | You can increase or decrease visibility of border color to make it more expressive or less noticeable. |
| Corner radius | Use the slider to control the rounding of product cards. You can adjust the radius to achieve the desired level of roundness or squareness, aligning them with your design vision. |