Product card settings

Setting	Description
Product style	There are three styles: 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 cards. 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	The image ratio for the collections tabs: 'Adapt to image' uses the aspect ratio of the images. This prevents the images from being cropped. 'Portrait' crops the images to use a 2:3 ratio 'Square' crops the images to use a 1:1 ratio
Show second image on hover	You can see the second image on hover if this product has 2 or more images added in the settings of the product detail page in your Shopify store.
Custom second image	This option allows you to upload an image to be displayed on product cards when hovered. Note: The image is shown for all products, including those with only one image and those with multiple images.
Zoom image on hover	Enabling the “Zoom image on hover” feature allows customers to zoom in on product images by hovering over them with their cursor. This can give them a closer look at the product and help them make a more informed purchasing decision.
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 badges	You can show or hide badges for the section, switching the toggle 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 them to your cart.
Product variants	On the product page in the dashboard, you can create 1 to 3 variant options. When enabled, these variants will appear on the product card in the Search page (Search results template) by turning on the toggle. To hide the variants, simply turn the toggle off. See the screenshots below the table.
Content align	The “Content align” option allows changing the alignment of content under products: '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 style	This setting enables you to define the capitalization style for text. You have the following options: Default: Uses the sentence case or title case as you’ve named the product in the dashboard. Uppercase: Converts all text to uppercase letters.
Heading color	Main Secondary Heading *Choose or change color for these styles and impact on an entire theme, you can in theme settings/color tab.
Heading font size	There are three options: Extra large Large Medium Small
Heading font weight	Control the thickness or boldness of the heading by selecting the appropriate text weight.
Price font size	You can change the price font size with these options: Small Medium Large Extra large
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary *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 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 parentheses, for example: ★★★★★ (10). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews, rating_count, and reviews. rating.

No results found