Bonnita Documentation
Open a Store for FREEOther ThemesBuy Theme
  • Greeting
  • Changelog
  • Full Theme Features in Bonnita
  • Installation
    • Install Theme
    • Install App
      • Shopify Search & Discovery
      • PageFly Landing Page Builder
      • Growave ‑ Product Reviews, Loyalty, Wishlist
      • Loox Product Reviews & Photos
      • Shopify Product Review
      • Snapppt - Instagram
      • Avada - SEO & Speed Booster
  • Basic Configuration
    • Customer Registration
    • Shipping Rates
    • Navigation
    • Online Store 2.0
      • Color Gradient
      • Dynamic Source
  • Theme Settings
    • Multiple Layouts
    • Typography
    • General
      • Favicon
      • Wishlist
      • Terms And Conditions Checkbox
      • Swatch / Customization Option
      • Slider Navigation Dots, Arrows and Page Pagination
      • Trust Image
      • Social Share Buttons
      • Dynamic Browser Tab Title
      • View Documention
      • Customer Login
    • Product Card
      • Product Media
      • Product Badges/ Labels
      • Product Swatch
      • Product Action
      • Product Review
      • Product Quick Shop
    • Multiple Languages
    • Multiple Currencies
    • Multi-Level Categories
    • Quick Search
    • Quick Cart
    • Quick View
    • Calculator Free Shipping Message
    • Someone Purchase
    • GDPR Popup
    • Newsletter Popup
    • Recently Viewed Popup
    • Before You Leave
    • Notify Me: Out Of Stock
    • Ask An Expert
    • Social Media
    • Color (Products)
    • Colors (General)
    • Animation
    • Custom CSS
    • Custom JS
    • Checkout
  • Header
    • Header For Desktop
      • Dropdown / Advanced Mega Menu
      • Label For Menu
    • Header For Mobile / Tablet
      • Layout 01
      • Layout 02
    • Mobile Menu
  • SECTIONS
    • Section On Every Page
    • All Sections in Theme
      • Featured Collection
        • Collection
      • Brand Slider
        • Image
      • Brand Tab
        • Tab Item
      • Custom Liquid
      • Custom Text
      • Customer Review
        • Review Settings
      • Featured Blog
      • Google Map
      • Image Banner
        • Large Image Settings
        • Small Image Settings
        • Custom Image Settings
        • Special Image Settings
      • Instagram
        • Instagram Settings
      • Product Block
        • Banner
        • Categories
      • Product Tab
        • Product Tabs Settings
        • Banner Settings
      • Rich Text
      • Slideshow
        • Image SlideShow
        • Video Slider
        • Banner
      • Spotlight Block
        • Small Image
        • Large Image
      • Video
      • Custom Service Block
        • Settings Block
      • Policies Block
        • Text
  • Collections List Page
    • Demo & Settings Data
    • Collections List Section
      • Custom Collection
      • Categories
      • Product Block
      • CMS Image
      • CMS Custom Text
  • Collections Page
    • Demo & Settings Data
    • Collection Section
      • Sidebar
      • Filter
    • Collection Blocks
      • Categories
      • Filter
      • Product Block
      • CMS Image
      • CMS Custom Text
      • Banner
  • Product Page
    • Product Section
    • Product Information
      • Blocks Settings
        • Breadcrumb
        • Title
        • Meta
        • Short Description
        • Information
        • Price
        • Vendor
        • Variant Picker
        • Variant Metafield
        • Quantity
        • Perks
        • Buy Buttons
        • Customers Viewing Function
        • Trust Image
        • Description
        • Custom Tab
        • Custom Block
        • Review Tab
        • Customization Property
        • Policies Block
        • CMS Image
        • Categories
        • Custom Liquid
        • Complementary Products
      • Product Media
      • Product Tab
      • Product Variant
      • Size Chart
      • Short Description
      • Dynamic Checkout Button
      • Compare Color
      • Sold In Last
      • Customers Viewing
      • How To Set Up Product Property By Metafields?
    • Product Recommendations
    • Recently Viewed Products
    • How To Setup Pre-Order Product?
  • Blog
    • Blog
  • Article
    • Article
  • Page
    • How To Create A Page?
    • Wishlist Page
    • Contact Us Page
    • About Us Page
    • Bulk Editor
    • Brands
    • Portfolio
    • FAQs
    • Other Pages
      • 404 Page
      • Search Page
  • Knowledge Base
  • Theme Support
Powered by GitBook
On this page
  • Product Card Image
  • Product Image Swap
  • Product Video Swap
  • Product Image Loading Effect
  1. Theme Settings
  2. Product Card

Product Media

PreviousProduct CardNextProduct Badges/ Labels

Last updated 2 years ago

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.

This feature works with products having MP4 video only.

Product Image Loading Effect

// Import link for the loading effect video