Quick view is a feature that allows customers to quickly view product information directly from the collection page without navigating to the product detail page. Its structure typically includes product images, name, price (with discounted price if applicable), variant options (such as color or size), quantity selector, stock status, and quick purchase buttons (Add to Cart/Buy Now).
This feature shortens the shopping process, provides a seamless browsing experience, increases conversion rates, and keeps customers engaged on the current page.
The Quick view button is commonly used in sections such as Featured Product, Featured Collection, or the Collection Page.
The following guide will walk you through customizing the Quickview section to best suit your store’s needs.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click to open dropdown pages in the topbar > select Products > select Only_config
Step 03: In the Sections tab, Change preview product in Preview and scroll down to find Quick view in Template
To configure quickview section for a specific product, click Quickview section, there are two primary blocks:
Medias block – used to configure and display product images or videos.
Infomation block – used to manage and customize all product content such as title, price, description, variant options, and buy buttons.
After open the Media block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device
Visible if certain conditions are met
Learn more about media types.
Show first media: Show first media until customers hand-pick a variant.
Enable media autoplay: Automatically plays media (such as videos) when the product page loads; videos are muted by default to allow autoplay.
Enable video looping: Replays the video automatically in a continuous loop.
Image ratio: Sets how images are displayed, options include:
+ Adapt to image: Keeps the original aspect ratio of the uploaded image without cropping.
+ Portrait: Displays images in a vertical rectangular shape, taller than it is wide.
+ Square: Displays images in an equal width-to-height ratio, cropping if necessary to fit.
+ Landscape: Displays images in a horizontal rectangular shape, wider than it is tall.
+ 4:3: Displays images with a 4:3 aspect ratio, a balanced rectangle shape often used for product photos.
Layout: Determines the layout of media thumbnails on desktop view (e.g., Thumbnail bottom; Bars bottom).
Width: Adjusts the percentage of page width taken up by the media section; optimized automatically for mobile.
Space between media and product info: Sets the pixel distance between the media section and the product information section; optimized automatically for mobile.
Layout: Determines how media thumbnails are displayed on mobile devices.
+ Dots: Shows small dots below the main image to indicate the number of media items and the current one being viewed.
+ Counter: Displays a numeric counter (e.g., “1/5”) showing the current media position out of the total number.
+ Thumbnails: Shows small preview images (thumbnails) below or beside the main image, allowing users to quickly switch between media.
The Information block contains multiple sub-blocks that represent different pieces of product information. You can easily add, rearrange, remove, and customize these blocks with flexibility to match your desired layout.
To add sub-block to the Information, click the Add block button (plus icon ➕) under the Information> Select block.
Once the Badges block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.
The badge will inherit its styling — such as font size, color,... — based on the Body section settings configured in the Theme settings.
No customizable settings available.
The Title will inherit its styling — such as font size, color,... — based on the Heading section settings configured in the Theme settings (Title use H5 size)
No customizable settings available.
The Price will inherit its styling — such as font size, color,... — based on the Body section settings configured in the Theme settings.
No customizable settings available.
Once the Variant picker block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Color selector type: Determines how color variants are displayed, such us
+ Block: Displays variant options as simple rectangular buttons with text labels.
+ Block with color swatch: Shows rectangular buttons with both text labels and corresponding color swatches.
+ List: Displays variant options in a vertical list format with text labels only.
+ Color swatch: Shows only the color swatches for variants without text labels.
+ Color swatch rectangle: Displays rectangular-shaped color swatches instead of circles.
+ Dropdown: Lists variant options in a dropdown menu with text labels.
+ Dropdown with color swatch: Displays variant options in a dropdown menu with both text labels and color swatches.
+ Variant image: Shows variant options as thumbnail images representing each variant.
Selector type: Sets how other variant types (like size or material) are displayed, for example as blocks, lists, or dropdowns.
A feature that appears only when the product has a size option, allowing customers to view sizing information.
Size chart source:
+ Page: Links the size chart to an existing Shopify page that contains size information.
+ Image: Uses an uploaded image file to display the size chart.
Page size chart: The selected Shopify page whose content will be shown as the size chart.
Image size chart: The uploaded image file that will be displayed as the size chart.
Once the Inventory status block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Low inventory threshold: Set the low inventory threshold; when the product quantity falls below this threshold, a warning will be displayed. Choose 0 to always show "in stock" if available.
Show inventory count: Display the remaining product quantity in stock, providing customers with information about product availability.
Show progress bar: Display a progress bar indicating the remaining product quantity, helping customers visualize the stock status.
Progress bar max value: Set the maximum value for the progress bar, defining the display range of the progress bar.
For pre-order products, the inventory will appear in yellow and will not show a quantity.
For low stock threshold products, the inventory status will be displayed in red and include the quantity.
For Out of stock products, the inventory will appear in red and will not show a quantity.
For In stock products, the inventory status will be displayed in green and include the quantity.
Once the Description block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Layout: Select the display layout for the product description (full description, read more, collapsible), customizing how product information is shown.
Maximum height (Only applicable for layout of type read more.): Set the maximum height for the description when using the "read more" layout, controlling the initial display height of the description.
The Quantity selector block allows customers to choose the number of items they want to purchase.
The quantity selector is automatically hidden if product are sold out.
Once the Buy buttons block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Add to cart button style: Select the display style for the "Add to cart" button (solid or outline), the "Outline" style is only available when dynamic checkout buttons appear.
Uppercase text: Converts the text on the "Add to cart" button to uppercase, creating emphasis and highlighting the button.
Show dynamic checkout buttons: Displays dynamic checkout buttons, allowing customers to quickly checkout using their preferred payment methods (e.g., PayPal, Apple Pay).
Show recipient information form for gift cards: Displays the recipient information form for gift cards, allowing buyers to send gift cards on a scheduled date with a personal message.
Once the Icon with text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Layout: Select the display orientation for elements (horizontal or vertical), customizing the website layout.
Items
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
Icon (Select "none" will hide the column or row): Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Custom image icon (200 x 200px .png recommended): Upload your own custom image icon, enabling personalization and brand alignment.
Text: Enter the text content to display, conveying information or messages to users.
How to get an SVG icon?
Step 1: Click the link Get a svg remixicon, or tabler icons under Custom SVG icon option
Step 2: Search icon you want > Click the icon > click Copy SVG button
Step 3: Go back to theme customize and paste SVG icon into the field
The Collapsible row block is used to display additional content in an expandable and collapsible format. Customers can click to expand and view the content, then collapse it when not needed.
Once the Collapsible row block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter a heading to explain the content of the section, providing a clear and attention-grabbing title
Row content: Enter text content for the row, allowing customization of the displayed information in the row.
Row content from page: Select a page to retrieve content for the row, displaying content from the selected page.
Standalone: Display the row content independently, not linked to other rows.
To select complementary products, add the Search & Discovery app.
1. How to display complementary products?
Step 1: Install [ Shopify Search & Discovery] app
Step 2: From Shopify Search & Discovery app > click open Recommendations tab > In the search bar, enter the product name you’re looking for > click to open that product
Step 3: After opening the product, use the search bar to find the desired product or click the Browse button to select it manually.
2. How to customize complementary products block?
Once the Complementary products block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter the heading for the Complementary products, providing a clear and attention-grabbing title.
Carousel style: Select the display style for the Complementary products (list or single), customizing how products are shown in the carousel.
Maximum products to show: Limit the number of products displayed
Auto-rotate: Enable/disable the auto-rotate mode for the product carousel, allowing the carousel to automatically switch products.
Change every: Set the time interval (in seconds) for the carousel to automatically switch products, controlling the transition speed.
Pause on hover: Enable/disable the pause on hover mode for the carousel, allowing users to stop the carousel to view products more closely.
Product card
Image ratio: Adjust the aspect ratio of product images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
Enable quick view: Enable/disable the quick view feature, allowing customers to see product details in a pop-up window without leaving the page.
Hover overlay opacity: Adjust the opacity of the image overlay on hover, controlling the brightness/darkness of the overlay effect.
Once the Custom liquid block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Liquid code: Allows you to insert custom Liquid code, app snippets, or other code to implement advanced customizations for the website.
Example:
<div style="display: flex; align-items: center; gap: 5px;">
<span style="color: #FFD700; font-size: 24px;">★★★★★</span>
<span style="font-size: 16px; color: #555;">5.0 / 5.0</span>
</div>
Once the Intallments banner block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
To display installments banner, your store needs to support Shop Pay Installments.
Once the Line item property block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Line item properties are used to collect customization information for an item added to the cart.
Label: Enter the label text for the data field, providing a clear description of the field's purpose.
Type: Select the data entry type for the field (text, checkbox, options), defining how users interact with the field.
Required: If you use required, then the customer must write a text (for text property) or tick the box (for checkbox property and options radio) to add to the cart.
Show at checkout and cart page: Uncheck this if you don't want the captured information to be shown in the order summary on the cart, checkout page.
Text
Only applicable for line item property of type Text.
Text type: Select the text input type (short or long), defining the size of the text input area and its intended use.
Maximum number of characters: Set the maximum number of characters allowed in the text field, controlling the length of the input content.
Checkbox
Only applicable for line item property of type Checkbox.
Value: Appears on the order when checked.
Options
Only applicable for line item property of type options.
Options type: Select the display style for the options (dropdown select or radio buttons), customizing how users select options.
Options: Enter the options, each option on a separate line, defining the available choices for the user.
The Pickup availability block displays information about whether a product is available for pickup at a physical store location, along with the store name and estimated pickup time based on the inventory settings in Shopify.
Once the Pickup availability block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Engage local shoppers by showing where items are available for pickup — right from the product page.
How to set up the local pickup?
Step 1: From the main screen of your Shopify store, click the Settings tab in the left sidebar > navigate to and open the Locations > click Add location if you haven't set up a shipping location yet, or select and open an existing location if one is already available.
Make sure you tick on the Fullfillment (Use inventory at this location to fulfill online orders) checkbox
Step 2: Still in the Settings tab, go to the Shipping & Delivery section > scroll down to Pickup in store > click on the store you want to configure for pickup > check the box for Location status (Let customers pick up orders directly at this location) > set the expected pickup time, for example: Usually ready in 2 hours.
Don't forget to configure the Ready for pickup notification, your customers will read this information to know the time they can go to the store to pick up the products
The result: you will see the location store shows the Offers pickup tag.
Once the Pop-up block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Link label: Enter the label text for the link, providing a brief description of the link's destination.
Page: Select the page to open pop-up, specifying the webpage that users will be taken to upon clicking the link.
The Separator block is used to display a horizontal line that visually divides content.
Once the Separator block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
No customizable settings available.
The Contact & Share block allows customers to either contact the store directly through a contact form or share the product via social media platforms.
Once the Connect & Share block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Position: Select the display position of the element (left or right), customizing the website layout.
Contact
Enable contact form: Enables/disables the contact form, allowing users to send messages or request information through the website.
Show contact form phone input: Displays the phone number input field in the contact form, allowing users to provide contact information via phone.
Share
Enable social share is a feature that allows users to share content from your website to various social media platforms.
The SKU block displays the product’s Stock Keeping Unit (SKU) as defined in the Shopify admin.
Once the SKU block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
No customizable settings available.
The Tax & shipping info block displays information about taxes and shipping on the product page. When added, it shows the text “Shipping calculated at checkout” along with a link to the store’s shipping policy.
No customizable settings available.
