Product card settings

Setting	Description
Color scheme	Applying a color scheme from the suggested list to product cards automatically updates all associated colors—such as background, heading, price, and compare button—across all product cards on your site.
Card background	Background Standard card style: Applies the color scheme’s background color to the product image when the image has a transparent background. Card style: Applies the color scheme’s background color to the entire product card, including the image and content below. Background Secondary Standard card style: Applies the color scheme’s secondary background color to the product image when the image has a transparent background. Card style: Applies the color scheme’s secondary background color to the entire product card, including the image and content below.
Card style	Standard: If the product image is transparent, the background from the color scheme will show through. Swatches, heading, price, and compare button appear below the image without a distinct background or border. Card: Arranges the image, heading, price, and buttons within a single card with a distinct background that separates it from the surrounding section.
Media size	Choose product image size: Adapt: Automatically adapts to the product image’s original aspect ratio. Portrait: Displays images in a vertical (portrait) ratio. Square: Displays images in a 1:1 square ratio. Landscape: Displays images in a horizontal (landscape) ratio. Custom: Allows you to define a custom aspect ratio.
Custom media size	Set a specific custom size for the product image.
Heading size	Choose the product heading size: Large Medium Small Extra small
Heading font	In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to select which font style is applied. Heading Body Accent
Heading color	Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme. Heading Text Accent
Heading text style	Choose a text style for the heading: Normal: Displays the text exactly as entered on the product page in the admin. Uppercase: ALL LETTERS ARE CAPITALS Lowercase: all letters are small
Show vendor	Click “Show vendor” to display the product vendor on product cards in this section. *Note:* The product vendor must first be added on the product page in the admin.
Show type	Click “Show type” to display the product type on product cards in this section. *Note:* The product type must first be added on the product page in the admin.
Show price	Click “Show price” to display the product price.
Show variant picker	Display color/size swatches on product cards. After enabling this option, all options below will be visible in settings.
Variant picker type	Swatches only: Shows only the first option added on the product page in the admin (such as Color or Size) below the product image. All variants: Shows all options, similar to bundles, with color swatches and sizes displayed below the product image.
Show variant popup button	Enable this option to display a button that opens a variant selection popup. The button appears when hovering over a product card. In the demo store, this popup is used to display sizes, but it can show size, color, or another single variant option.
Variant popup option names	Enter variant option names separated by commas (for example, Size, Sizes). This allows different option names—such as shoe size, dress size, or pants size—to be displayed in the popup, depending on the product.
Variant popup title	Enter a custom title for the variant selection popup.
Show compare button	Enable this toggle to display a compare button. After clicking the button, customers can add products to the compare modal and view product details side by side in the compare popup.

Demo store's product card

Product card on hover

Variant popup button

Variant popup

First icon: Opens the Quick View popup with all product variants and product details.
Second icon (Cart): Adds the selected product or product variant to the cart when clicked.

How to Add a Product Variant to the Cart

For a product with color and size options, you can add a variant to the cart in two ways:

Method 1: Using the Variant Popup

Click on the desired color from the swatches below the product image.
Hover over the product image and click the variant popup button.
Select the size in the popup and close it.
Click the cart icon to add this specific variant to the cart.

Method 2: Using Quick View

Hover over the product image and click the quick view icon.
Choose the desired variant in the quick view popup.
Click Add to Cart to add it to the cart, or Buy It Now to proceed directly to the checkout page.