Card settings (Recommendation products)
Product style | Four styles are available:
|
Image ratio | Sets the image ratio for the product images:
|
Show second image on hover | You can see the second image on hover if on the detail page of this product are 2 or more images in the list. |
Custom second image | You can add one image, which will be visible on hover on every product. |
Zoom image on hover | See the image in enlarged form. |
Show badges | You can show or hide badges for the section, marking the checkbox or removing the checkmark according to your design preferences. |
Show add to cart button | Disable this option if you want to hide the "Add to cart" button on the product card. |
Show quick view icon | Shows a quick-view icon. Clicking on the icon opens a pop-up with short information about the product. You can choose product variant options and add to your cart this variant. |
Content align | Sets the alignment of the content:
|
Heading font | 'Heading' settings for the font as for heading-font 'Body' settings for the font as for body-font *Change the font family, font size, and font weight of heading or body style in Theme settings /Typography. Any change in the Typography tab of theme settings will affect the whole theme. |
Heading color | The setting allows you to set up heading color. Three options:
*To choose or change colors for the heading, go to the “Colors” tab in the theme settings and locate the “General colors" block with text color options. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme. |
Heading font size | You can adjust the font size of the card heading using the following options:
|
Button color style | This feature allows you to customize the color style of buttons. You have two options to choose from:
*To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme. |
Show image border | This option will add a visible border around the product image. This can help to make the image stand out and give it a more defined look. |
Show vendor | Shows the vendors of the products under the image. |
Show product rating | Shows the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (10). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating. |
Mobile card style | The image style for the featured images of the products:
|