> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/theme-settings/product-card/product-media.md).
# Product Media
## Product Card Image
| Setting | 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? | 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 lazyload. |
| Product Image Loading Effect Name | Fill in the text to be shown during the Image Loading Effect. |
| Product Review | Toggle the display of ratings star on product card. |
| Product Compare | Toggle the display of compare checkbox on product card. |
| 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 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.
{% hint style="info" %}
This feature works with products having MP4 video only.
{% endhint %}
## Product Image Loading Effect
// Import link for the loading effect video