Product cards

About:

Product cards are essential elements in showcasing your products on your website. They provide a visually appealing way for customers to browse and interact with your merchandise. The Product Cards settings allow you to customize various aspects of how your products are displayed, including media, badges, add to cart options, variants, and swatches.

Vendor:

Show product vendor: Check to display, uncheck to hide

Media Settings:

Show Secondary Media on Hover: Enables the display of secondary media (such as additional product images) when users hover over the product card.

Product Media Ratio: Specifies the aspect ratio for product media, allowing you to choose from options: Auto / 1:1 / 3:4 / 4:5

Media Fit: Cover / Contain

Badges:

Show product card custom badges: Check to display, uncheck to hide

Show product card discount badges: Check to display, uncheck to hide

Show product card sold out badges: Check to display, uncheck to hide

Badge display position: Start / End

Discount badge background color: Choose desired color

Discount badge text color: Choose desired color

Note: The two settings above only apply to the Discount badge "Sale" that's only triggered when the "Compare-at-price" of the product has been activated in the product backend.

Price display position: Normal, Next to title

Actions:

Buttons color scheme: Choose desired color scheme

Enable quick add to cart drawer for multi variant products: On / Off

**Enable quick add to cart button for single variant products: ** On / Off

Add to cart button content:

Icon: Displays only an icon on the add to cart button.

Icon with hover: Will display the "+" icon and text when you hover over the icon.

Text with icon: Displays both text and an icon on the add to cart button.

Text: Displays only text on the add to cart button.

Add to cart button text:

You can set button text when you select Icon with hover text

Variants:

Variant option names: List of option names to show the variants "Color, Material, etc"

Variants Desktop display options: None / Info / Buttons

Variants Mobile display options: None / Info / Buttons

Variant option button size: Between 1.6 and 4 rem

Variant options display limit: Between 2 and 8

Swatch type variant shape: Square / Circle

Show product groups: On / Off

Product options position: Normal / Inline

Contact Us