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 UsWas this article helpful?
Have more questions? Submit a request