Product Card
This section allows you to control how products are displayed in product grids and listings across the store.
Here you can adjust the product image behavior, button appearance, text layout, visibility of product details, and interactive features such as wishlist, compare, and quick view buttons.
Location: Theme settings -> Product Card
Product Card – Section Overview
Option Group
Option / Setting
Explanation
Product Card
Image resize: Contain / Cover
Determines how the product image fits inside the image container. Contain shows the entire image, Cover fills the space and may crop edges.
"Add to cart" button: Normal / On hover / Inline
Controls when and how the Add to Cart button appears: always visible, visible only on hover, or displayed inline below the product content.
Price size: Normal / Large
Adjusts the size of the product price text. Larger text can help highlight pricing more prominently.
VARIANTS IMAGE
Image hover effect: Disable / Zoom / Rotate / Slide / Shine
Sets the animation effect when hovering over the product image. Enhances the visual interaction.
Image ratio: Auto / Portrait (3:4) / Landscape (4:3) / Square (1:1) / Round (1:1)
Controls the shape and aspect ratio of product images for consistent display across the grid.
SECTION SETTINGS
Text align: Left / Center
Aligns product text elements to the left or center.
Underline on hover
Shows an underline when hovering over product titles. Helps indicate they are clickable.
Show badge "Sale"
Displays a sale badge if the product has a discounted price.
Show badge "Sold Out"
Displays a “Sold Out” badge when the product is out of stock.
Show badge "Feature"
Displays a featured product badge for highlighted items.
Show "Countdown"
Shows a countdown timer for products with active timed promotions.
Show vendor
Displays the product vendor or brand name.
Show type
Displays the product type.
Show price
Shows the product price below the name.
Show small description
Displays a short product description (can be created via product metafields).
Truncate product name
Shortens long product names to keep layout clean.
Button "Add to cart": Hide / Show / Show only text / Show only icon
Controls how the Add to Cart button is displayed, including text-only or icon-only styles.
Enable review stars
Shows star ratings if a review app is installed and integrated.
Media buttons desktop
Show wishlist
Displays the wishlist button on desktop product cards.
Show compare
Displays the compare button on desktop product cards.
Show quick view
Displays the quick view button on desktop product cards.
Media buttons mobile
Show wishlist
Displays the wishlist button on mobile product cards.
Show compare
Displays the compare button on mobile product cards.
Show quick view
Displays the quick view button on mobile product cards.
"Add to cart" buttons
Normal: The buttons are located at the bottom of the product card but are on different levels if the texts and prices are not the same.
On hover: buttons become invisible, but appear when hovering over them.
Inline: Ensure that all buttons on all product cards are aligned vertically.
Last updated