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 | Add here the same variant name as on product detail page in admin panel. In this field, you have the flexibility to replace “color” with various alternatives such as “color”, “palette”, “hue”, “shade”, “tint”, or “tone”, or even write it in another language of your choice. |
| Product variants size | Controls the size of color swatches on product cards. |
| 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 |
| Static buttons | If enabled, the buttons Add to cart and Quick view will be static on the product card. |
| 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. |
Compare bottom bar and popup buttons
First button — Compare (bottom bar)
When you click the Compare icon to compare multiple products, the comparison bar appears at the bottom of the screen. In this bar, you will see the Compare button and can change its view using the options explained in the table below.
Second button — Compare (popup)
When you click the Compare button, a popup opens. From there, you can change the view of the View Product button using the options described in the table below.
| Setting | Description |
| Button style |
In Shopify, button styles can be customized using the Primary and Secondary button color sets defined in the Theme Settings → Colors section. These color sets help ensure consistent button styling across your store. The style changes apply to both buttons at the same time (Compare and View Product). For more details, refer to the information in this section header. |
| Button outline |
Outline buttons have a transparent background with a visible border, creating a sleek and modern appearance. Choose from the following options:
|
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. |