Open Store Free
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket

Kalles Shopify Theme

home/Documentation/Kalles Shopify Theme
Popular Search:Import demo, Update theme, Custom color
  • 1. GREETING
  • 2. CHANGELOGS
  • 3. INSTALLATION
    • How to get Instagram Access Token
    • How to update the theme?
    • Import Demo
    • Recommend Shopify App
    • Some Basic Before Using Theme
    • Upload Theme
  • 4. RECOMMEND APPS
    • Facebook Messenger - Live Chat
    • Flash Search
    • Growave
    • LayoutHub
    • Loox
    • ReCharge
    • Ryviu
    • Slider Revolution 6
  • 5. UPDATE THEME
    • How to update the theme between versions 3.x.x
    • What is new in version 3.0
  • 6. PRODUCT PAGE
    • Advance Product Type
    • Back in stock notification (Notify me form)
    • Brand Image (Vendor Image)
    • Configure Metafield on Kalles 3.x - supported OS 2.0
    • Configure Product 3D, AR models
    • Configure Size Guides for Products on Kalles ver 3.x.x
    • Configure Submenu Labels and Custom Product Labels
    • Configure the notice: "Will not ship until..." for Pre-order product
    • Configure variant images for product in Shopify dashboard
    • Configure variant on the Product page
    • Frequently Bought Together
    • Product Description sidebar with Collapsible tabs
    • Product Summary option
      • Configure Product Summary - Blocks Content
      • Configure Product Summary - Settings
    • Use the Custom HTML with Metafields in the Description Product tab
  • 7. COLLECTION PAGE
    • Filter by Product Options
    • Filter by Tags
  • 8. THEME SETTINGS
    • Cart & Search Widgets
    • Checkout
    • Collection Page
    • Custom CSS, JS
    • Favicon
    • General Settings
    • Group Variants Image
    • Header
    • Header Configuration
    • Language, Currency
    • Layout
    • Logo Header
    • Other settings
    • Product Item Settings
    • Product Page Settings
    • Recommendation Pop-up Add to Cart
    • Social Media
    • Style and color
    • Typography
  • 9. THEME SECTIONS
    • About us
    • Banner
    • Banner Custom
    • Banner Custom 2
    • Collection Banner
    • Collection Grid
    • Collection List
    • Collection list
    • Collection List Manual
    • Collection List Packery
    • Collection Slider
    • Custom HTML
    • Custom Liquid
    • Custom Section
    • Custom Section 2
    • Daily Deal Of The Day
    • Gallery
    • Image with text
    • Image With Text Overlay
    • Packery Collection
    • Packery Collection Manually
    • Promo Text
    • Rich text
    • Search Section
    • Shipping Text Simple
    • Store Information
    • Tab Collection
    • Tab Collection Slider
    • Testimonials
    • Text Columns with Images
  • 10. SECTIONS
    • Age verification popup
    • Blog Manual
    • Blog Posts
    • Brand List
    • Configure Product Quickview
    • Cookie Law Info
    • Exit Product Popup
    • Footer bottom
    • Footer top
    • Mobile menu & Mobile Categories
    • Newsletter popup
    • Sales popup
    • Shopping Cart Widget
    • Sticky Toolbar Mobile
    • Text Columns with Images 2
  • 11. BLOG
    • Default Blog
    • Filter by Tag for Blog
    • Portfolio Configuration
  • 12. THEME FAQs
    • Change currency format on Checkout Page
    • Countdown timer & Design images option for all sections
    • Custom HTML code for Size Guide page
    • How to change title "Product" to other words on "Collections/All" page?
    • How to configure custom colors swatch for your store?
    • How to enable/ disable Terms & Condition checkbox on Cart sidebar/ Cart Page?
    • How to enable/disable "Shipping calculated at checkout"?
    • Trick, Helpful Custom CSS
  • 13. MAIN NAVIGATION
    • Configure Megamenu on Kalles 3.x (New Type block)
  • 14. VARIANT CONFIGURATION
    • Configure different ID for Product Variants
    • Configure product Grouped
    • Configure Variant on loop & Collection page
  • 15. PAGES
    • About us

Configure Product Quickview

426 views 1 December 7, 2021 Updated on December 23, 2021 Kate

If you want customers to be able to view your products without having to go to the Product Page, you can enable the Product Quickview option on the Frontpage. This option allows customers to view all of your product details without being redirected to the Product page, allowing them to save time and have a better shopping experience in your store.

1. Enable Use Quickview option

Our Kalles theme has an option allow enable/ disable Quickview in Theme Settings. You can go to Theme Settings > Product Item Settings option to enable/ disable Product Quickview option. You guys can feel free to follow my GIF image below:

2. Product Quickview Options

2.1. Product Quickview

If you wanna preview the Product Quickview popup, you need to choose a product demo in the option below:

You can see the layout of the Quickview popup on the demo product to configure follow what you want.

2.2. Design Main Image

This option allows you to configure the layout of the product images on the Quickview popup.

  • Aspect Ratio Main: You can choose the Image ratio in some options below. Change the image ratio to see the image layout change.

Example: Image ratio 1:1

Image ratio of website ASOS:

  • Main Image Size: This option allows you to choose adjust the image size following the Image ratio. Image size Auto: The ratio will keep the height of the image and the Image size Full: the ratio will cut some parts of the image. You guys can see the GIF image below to see the difference in the layout when changing the Main Image size

  • Main Image Position: This option allows you to configure the position of the main product image on the Quick view popup. The Kalles theme has 10 positions for you to choose, you can see in the image below:

2.3. Quickview Settings

In the Product Quickview bar, you can access the Product Quickview Settings in the option below:

The Quickview Settings have all features below:

  • Choose a placeholder for the product that has no image: This option allows you to choose an image for the product that does not have the images yet. It only works with the Product does not have the images.
  • Use RTL checkbox: Tick on this checkbox to enable RTL mode for the content of the Product Quickview popup
  • checkbox: Tick on this checkbox to choose to show the first product image to become the featured image on the Quickview popup.
  • Use New/ Sale Label checkbox: Tick on this checkbox to enable the New/ Sale label on the Product.
  • Pick product variant: You can choose the action for the Product variant here. We have No pick, Pick first variant and Pick first available variant.
  • Show incoming message

3. Product Quickview blocks

The Product Quick View has 18 blocks and those blocks will help you customize the Quickview popup so easily.

Those blocks have the same feature as the blocks in the Product Page > Product Summary option. With all blocks in the image above, you can build a complete layout that looks like the image below:

 

Was this helpful?

1 Yes  No
Copyright 2021 the4.co. All Rights Reserved.
Popular Search:Import demo, Update theme, Custom color