Set up for Product Card
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 -> Set up for Product Card.
Product Card Image
| Description | |
|---|---|
Adapt To Image | Select the display type of media on 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. |
Image Height (%) | Fill in the desired ratio of the width and height of the product card media in %. |
Image Fit | Select the product card image crop type: Default: The image will keep its current scale ratio to adapt. Full Width Or Height (No Crop): The image will scale to cover up the full area of set product card image with retained ratio. Full Width Or Height (With Crop): 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. |
Product Image Swap | Toggle the functionality when the product card image is hovered, it will swap to the second image. |
Enable Video When Hovering Product Items? (Only Work With mp4 Video) | The same as Product Image Swap but for video if there is any mp4 video attached to the product. |
Show Product Image Loading Effect | Toggle the display of placeholder when the image is being loaded due to lazy load. |
Product Image Loading Effect Name | Fill in the text to be shown during the Image Loading Effect. |
Product Vendor? | Toggle to show or hide product vendor. |
Product Price? | Toggle to show or hide product price. |
Product Size Variant? | Toggle to show or hide product size variant. |
Product Text Size Variant? | Toggle to show or hide text "MORE SIZES AVAILABLE". |
Product Text Color Variant? | Toggle to show or hide the color variant name after the product name. |
Text Color Variant Style | Select the display text on Product card: Style 1 Style 2 |
Size Variant Display Style | Select the display size variant on Product card: Style 1 Style 2 |
Product Review | Toggle the display of ratings star on product card. |
Product Compare | Toggle the display of compare checkbox on product card. |
Disable Product Compare on Homepage? | Toggle the display of compare checkbox on product card for homepage. |
Product Compare Type | Select the display type of product compare on product card. Default Icon |
Product Wishlist? | Toggle to show or hide product wishlist. |
Product Quick View? | Toggle to show or hide product quick view. |
Product Quick View Type | 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. |
Position QuickView & Wishlist | Select the desired position of the quick view and wishlist buttons cluster either on the right or left side of product card. |
Product Content Alignment | Select the desired position of content on the right or left side or center of product card. |
Product Image Swap
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
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.
Product Image Loading Effect
Last updated
