Set up for product card
Last updated
Last updated
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> Product card
| Description | |
|---|---|
Product image swap is a feature which allows adding a product image hover effect. In other words, it flips or changes a product image on hover.
Product video swap is a feature which allows adding a product video hover effect. In other words, it plays a product image on hover.
This feature works with products having MP4 video only.
Image ratio
Select the image ratio type for the product card:
Adapt to image: the image size on product card will scale according to the image actual size. Portrait: The image of the product card will have a height more than its width. The ratio of the width and height can be adjusted with the "Image height (%)" setting below. Square: The image of the product card will be a square.
Portrait aspect ratio
Fill in the desired ratio of the height of the product card media in %. Note: Use for portrait ratio.
Image fit
Select the image fit type for the product card:
Original: The image will keep its current scale ratio to adapt. Fit content: The image will scale to cover up the full area of set product card image with retained ratio. Fill: The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio.
Enable image swap
Toggle the functionality when the product card image is hovered, it will swap to the second image.
Play video on hover
Only works with MP4 video.
The same as Product Image Swap but for video if there is any mp4 video attached to the product.
Enable product image loading effect
Toggle the display of placeholder when the image is being loaded due to lazy load.
Show vendor
Toggle to show or hide product vendor.
Show price
Toggle to show or hide product price.
Show price percentage
Toggle to show or hide the percentage by which the product price has been discounted.
Show size variants
Toggle to show or hide product size variant.
Size variant style
Select the style for the product card size variant:
Style 01 Style 02
Show text 'more sizes available'
Toggle to show or hide text "more sizes available".
'More sizes available' text size
Determine the font size for the text 'more sizes available'.
Show the color name in the product name
Toggle to show or hide the color variant name after the product name.
Color name style
Select the style for the color variant name after the product name on the product card: Style 01 Style 02
Color name size
Determine the font size for the color variant name after the product name on the product card. Note: Only for color name style 2.
Show compare
Toggle the display of compare checkbox on product card.
Hide compare on home page
Toggle the display of compare checkbox on product card for homepage.
Compare style
Select the display type of product compare on product card:
Default Icon
Show wishlist
Toggle to show or hide product wishlist on tablet and desktop.
Show wishlist on mobile
Toggle to show or hide product wishlist on mobile.
Show background for icon
Toggle to show or hide background for wishlist icon.
Show quick view
Toggle to show or hide product quick view on tablet and desktop.
Show quick view on mobile
Toggle to show or hide product quick view on mobile.
Quick view style
Select the display type of quick view button on product card:
Default: The quick view button is shown in the center of the product card when hovered. Icon: The quick view eye icon button is grouped with the wishlist button to the right of left side.
Quick view & wishlist position
Select the desired position of the quick view and wishlist buttons cluster either on the right or left side of product card.
Content alignment
Select the desired position of content on the right or left side or center of product card.
