HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Change the default sorting of a collection
    • Combined listings app
    • Customize the checkout
    • Remove 'Powered by Shopify' in Copyright
    • Remove text Tax included and Shipping calculated at checkout below the product price
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • What is a Quick view?
  • How to enable Quick view
  • How to customize Quick view
  • Change the Quick view type
  • Customize what is included in the Quick view
  1. Page's global sections

Quick view

Set up product quick view to view product details without leaving the current page

PreviousProduct compareNextSpotlight picks

Last updated 1 month ago

What is a Quick view?

The Product Quick view option offers several unbeatable benefits:

  • Improved shopping experience: It's easier for your customers to select and add any items to cart without loading the whole product age and clicking back-and-forth between the product page and the item pages for details.

  • Reduced server load: The product page is not reloaded when the shopper selects this feature.

  • Display of discounted pricing and other details: You can utilize the quick view feature to show discounts before the cart page.

You can manage which blocks are shown on the Quick View - such as the buy buttons, variant picker, price, SKU, complementary products, badges and tags, etc.\

How to enable Quick view

Quick view can be enabled for your Product cards.

Steps:

  1. In theme editor (Customize), navigate to Theme settings > Product cards.

  2. Select the option Enable Quick view button.

How to customize Quick view

Change the Quick view type

Steps:

  1. In theme editor (Customize), navigate to Theme settings > Quick view.

  2. Select the type as Drawer/ Modal.

Product media layout in each type is different:

  • Drawer: Stacked layout

  • Modal: Carousel.

Customize what is included in the Quick view

Steps:

  1. In the theme editor (Customize), locate Overlay group > Quick view.

  2. Make necessary changes.

  3. Save.

Section settings

  • Enable video looping: Allow videos in the product media to play continuously.

Block settings

Learn more: Product cards

To know more about media types, see .

Enable sticky content on desktop: Allow the content to stay visible as customers scroll through the product details. (for ).

The Quick View feature includes multiple blocks to display detailed product information. You can add, remove, or customize them as you like, similar to the section.

👀
Product media
Product information
Quick view type as Drawer