Card settings (Recommendation products)

Setting Description
Product style

Four styles are available:

  • Buttons down hover (When hovering over a product image, the “Add to cart” button and “Quick view” icon are displayed side by side at the bottom of the image)
  • Buttons center hover (When hovering over a product image, the “Add to cart” button is displayed in the center of the image with horizontal alignment)
  • With borders feature enhances your product display by adding a sleek border to all product card. When a user hovers over a product image, the “Add to Cart” button elegantly appears beneath the border, positioned after the heading and price.
  • Title on hover (When hovering over a product image, a heading with the price is displayed in the center of the image. The 'Quick View' icon appears at the top center of the image, allowing users to quickly preview the product. Additionally, the 'Add to Cart' button is positioned at the bottom center of the image, providing users with a convenient option to add the product to their cart).
Image ratio

Sets the image ratio for the product images:

  • 'Adapt to image' uses the aspect ratio of the images. This prevents the images from being cropped.
  • 'Portrait' crops the images to a 2:3 ratio, where the height of the image is 1.5 times the width. It is suitable for images that have a taller or portrait orientation.
  • 'Square' crops the images to a 1:1 ratio, where the width and height of the image are equal. It creates a square-shaped display for your 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.
Product variants On the product page in the dashboard, you can create 1 to 3 variant options. When enabled, these variants will be displayed on the product card in the Collection Tabs section by turning on the toggle. To hide the variants, simply disable the toggle. Check screenshots under the table.
Content align

Sets the alignment of the content:

  • Left — Aligns the content to the left.
  • Center — Aligns the content to the center.
  • Right — Aligns the content to the right.
Heading font

You can choose whether headings use the Heading or Body text style.

  • To change the font family, font size, or font weight of heading or body style, go to Theme Settings > Typography.
  • Note: Changes in the Typography tab will apply across the entire theme.
Heading color

Choose a color for your card heading. You have three options:

  • Main
  • Secondary
  • Heading
Heading font size

You can adjust the font size of the card heading using the following options:

  • Small
  • Medium
  • Large
Button color style

This feature allows you to customize the color style of buttons. You have two options to choose from:

  • Primary
  • Secondary

This setting can be applied to buttons, links, and underlined links within the section.

*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:

  • Grid
  • Slideshow

Product variants option

  1. Set variant options on product detail page on dashboard


  1. Enable “Product variants” toggle


  1. When you select a variant that is out of stock, the product image button immediately displays an “Out of stock” label on the product image, and the variant option under product heading is crossed out.


  1. When the selected variant is in stock, the "Add to Cart" button will be displayed.


  1. If a product has a long list of variants, you can scroll left and right to view all available options.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us