User Guide

Search limit to:






Quick view

by Admin on Oct 06, 2025

1. What is a Quick view?

Quick View is a feature that allows customers to quickly preview product details without leaving the current page. Typically, when users hover over a product image or click on a designated button, a modal window or pop-up appears, displaying essential product information such as name, price, variants, and a brief description.

2. Section Components

Section

 Quick view

Displays essential product information for quick preview.

Available block

Displays the name of the product.

Shows the product's price.

Displays the name of the product vendor.

Shows the average customer rating and review stars.

Indicates if the product is in stock, low stock, or out of stock.

Displays the product's unique identifier code.

Shows tags like "Sale", "New", or "Featured".

Offers an option for gift wrapping service.

Allows customers to select product variations (size, color, etc.).

Enables customers to add the product directly to cart from the quick view.

Shows a brief summary or key features of the product.

Allows you to add custom text content, such as promotional messages or additional product details.

Inserts a horizontal line to visually separate different sections of content within the quick view.

Adds an empty space or adjusts the padding to control the spacing between elements.

Allows advanced customization by inserting your own HTML code for unique features or integrations.

Allows customers to sign up for notifications when an out-of-stock product is available again.

Displays additional product customizations (e.g., engraving).

Highlights a key feature with an icon (e.g., "Free Shipping").

Presents short information points with accompanying icons.

Displays accepted payment icons (e.g., Visa, PayPal).

Provides a link to navigate to the full product page.

3. Location & Setup

  1. Go to "Online Store" > "Themes" > "Customize".
  2. Find the Overlay setting group on the left side.
  3. Search for Quick view (this section is added by default).

4. Core Features

  • Customizable Information Display: Choose exactly which product details to show (title, price, rating, inventory status, etc.) by toggling blocks on/off.
  • Direct Purchase Option: Enable Buy buttons to allow instant adding to cart without navigating to the product page.
  • Back-in-Stock Alerts: Increase conversion by allowing customers to sign up for notifications when out-of-stock items are replenished.

5. Common Use Cases

🤔 How to set up a Quick view?

Want to set up a Quick view but don't know where to start? Here are simple steps:

STEP 1:

Search for Quick view (this section is added by default).

STEP 2: Add the blocks to show the information you want

There are multiple types of blocks available for the Quick View. Here's how to set up the blocks:

Block name

How to set it up?

Product title

Adjust Heading size (Small, Medium, Large).

Price
  • Show tax/shipping info, adjust text size
  • Configure sale label with dynamic codes like sale, sale_amount, qty, or price.

Vendor name
  • Link vendor to collection or select a page to open in a popup.
  • Paste a custom link and choose to open in a new window.

Product rating

Install a product rating app to display ratings.

Inventory status

Automatically displays stock status (no settings).

SKU/Barcode

Automatically displays the product's SKU or barcode (no settings).

Labels and badges

Set label position (inline or on product media).

Gift wrap

Add gift wrapping label and set light/dark color icons.

Variant picker
  • Choose Type (Dropdown, Button).
  • Enable color swatches to display color swatches for color variants
  • Customize size chart with an option to link to a page.

Buy buttons
  • Toggle quantity selector, dynamic checkout, pickup availability.
  • Customize pre-order labels, messages, and button style.

Description
  • Choose between tab or inline layout, add your product description.
  • Customize the icon and expandable text labels for optimal content presentation.

Text
  • Enter text; use [brackets] for highlights.
  • Set text transform, default content height, and "Read more" labels.

Separator

Inserts a dividing line (no settings).

Space

Adjust spacing.

Custom HTML

Insert custom code for advanced features.

Back in stock alert
  • Set heading, text, button label, and success message.
  • Toggle shows only when product is unavailable.

Customizable options
  • Add text field, dropdown, file upload, date, etc.
  • Set customizable options according to chosen option type.

Featured icon
  • Add up to 5 feature points with icon, heading, and text.
  • Configure display rules per collection, choose icon sizes, borders, color schemes for light/dark modes, and set content alignment.
  • Each feature can include custom icons, headings with optional links, and descriptive text.

Text with icon
  • Choose icon, set icon size, and enter text with highlight options.
  • Customize background and text colors for light/dark modes.

Payment methods
  • Add heading and descriptive text.
  • Enter payment method codes (e.g., apple_pay, google_pay) to custom payment icons.

View product details

Set button style (Primary/Secondary/Text link).

STEP 3: Customize the overall look

Click on the Quick view section to open its settings panel and:

  • Choose Image ratio like Square (1:1), Landscape (4:3), Portrait (2:3), Wide (16:9), Standard (3:4).
  • Set navigation buttons style.

STEP 4:

Click "Save" when done.

 

🤔 How to set up variant-specific images in Quick view?

Want to display multiple images per product variant in Quick view but don't know where to start? Here are simple steps:

STEP 1: Access your product in Shopify

  • In Shopify admin, go to Products.
  • Select an existing product or click "Add Product" to create a new one.

STEP 2: Upload images & update variants

In the Media field, click "+" and upload all the images you need.

In the Variants section, choose Add options like size or color (product don't have any initial product) or Add another option (product have initial variant). Enter the option name and option values for your product.

STEP 3: Edit ALT text

Click the image to edit the ALT text

The ATL Text is the same with Option value you set above, MUST follow this format: #option-value

  • #: hashtag character
  • option-value: written in lowercase, replace spaces with -

Example: Inside the option name "Color", there is an option value called "Mint blue", then for all images representing this Mint blue option, enter #mint-blue for your alt tag and click "Save".

All images related to one Option value use the same ALT text

STEP 4: Setting up the Maximize Theme

  • Click on the Quick view section to expand its settings.
  • On the right panel, scroll down and enable Only show media associated with the selected variant.
  • Fill in the Option name in Option to classify variant media. Example: Color

STEP 5:

Click "Save" when done.

 

🤔 How to show the Quick View button when hovering over a product card?

Want to show the Quick View button when hovering over a product card but don't know where to start? Here are simple steps:

STEP 1:

  • Search for Quick view (this section is added by default).
  • Click on the Quick view section to expand its settings.

STEP 2:

In the settings panel, scroll to the Product card settings.

Toggle ON the Show Quick view button option.

STEP 3: Customize the button label (Optional)

  • In the Quick view button label field, enter your preferred text.
  • If left empty, the default label "Quick view" will be used.

⚠️ Note: The Quick view button label is displayed on Desktop 🖥️ only, specifically on collection pages using the list view layout.

STEP 4:

Click "Save" when done.

 

🤔 How to show the Quick View button on Mobile?

Want to show the Quick View button on Mobile but don't know where to start? Here are simple steps:

STEP 1:

Go to Theme Settings > Product cards.

Find Overlay settings.

STEP 2: Configure Mobile quick add button

In the Overlay settings, enable the Show Quick add button and locate the Quick add mobile position option.

Select your preferred position:

  • Bottom of product card (displays below product info)
  • On product image (overlays on product image)

STEP 3:

Customize the Button style.

STEP 4:

Click "Save" when done.

6. Common Questions

Q: What about my ALT text for SEO purposes?

A: Simply type your desired text in the ALT field before the # symbol, like this:

Example: Super attractive and comfortable #mint-blue.

Need help? Contact our support team at Omni Themes Support.