Customize Quick View Popup

Customize Quick View Popup


Popup Layout

Main image position


You can choose to display main product image on the left or on the right of the popup.

Thumbnails position



The other images can be arranged on the left, right or bottom of the main image, or not to be displayed.
Thumbnail images are hidden on mobile. If you want to show on mobile, contact us.

Show arrows

When enabled, it shows 2 arrows on the left and right side of main image. Click on these arrows to change between product images.

Show number of image

This feature helps to show the total number of images of the product. Click on the number will change to the corresponding image.

Enabe inner Zoom image

*Only available in Basic & Premium plan
Enable this and then click on the image to zoom the product.
Zoom does not work on mobile to avoid affecting customer's touch event.

Popup size & Image size


You can resize popup and product main image into 'Small', 'Medium', 'Large' sizes.

Image ratio

Adjust image ratio to enhance the overall structure of Quick view pop up.

Animation

*Only available in Basic &Premium plan

Modify popup animation to make quick view appearance smoother and more attractive. 



Product info


Description

We offer two options of displaying description. 

Show Short description (not support description format) 

Only bare text is displayed.
You can restrict it by entering the word limit you prefer.

Show Full description (support description format) 

All types of text format (URL/bold/underlined,etc..) are shown. 

For the full description position, it can be placed at the top of the popup (under product name & price), or at the bottom of popup. 
If placed on top, full description can be cut off by enabling the "Enable See more/less", and you can set limits on the content by height. 
If placed on bottom, description will fully show. (recommend to set on bottom if description is too long). 
'Description' is hidden on mobile version to have cleaner user interface.

SKU, Product type & Vendor

All information is taken from product admin. 
Product type and Vendor link to the corresponding filter.

Product availability

To show the number of products available in Inventory, we need to add a small script into your theme.
Please refer to this article to learn how: How to show Product Availability on Quick view



Button action


Add to cart button

After your customers click on 'Add to cart' button, they can direct to Cart page or Checkout page (Basic & Premium only) immediately.
After adding to cart successfully, a message will appear. You can change this message in Extra.
These two modes can be enabled at once. If so, "Go to checkout" will be priority.

Buy now button

*Only available in Basic & Premium plan. 
Buy Now button will direct customer to Checkout immediately, skip cart page.

This links to product page to see product details.



Fonts and colors

Fonts


Our app supports Google Fonts, you can type the font name to search.
Leave it blank if you want to use theme's default font.

Price font and product title font are selected separately. To change these two fonts, go the 'Price font' and 'Product title font' option below.


Colors


Choose colors for Product title, Price, Description, 'Add to cart' button text and color.
On the bar of each section, type color code (remember the # ) or click on the rounded square on the right to choose color from color palette.

The Highlight color applies for: Saving amount badge, number on Visitor count, and all hover color.

    • Related Articles

    • Design Quick View Button

      Icon Enable 'Show button icon' mode to display Quick View button icon. Choose the icon you want to display from the list. Button on Desktop Text To show text on button, switch 'Show button text' on. When button text is shown, the default text is ...

    • How to translate every element of Quick View with Tranzi?

      Although Tranzi can integrate seamlessly with Quick View, there are some fields from Quick View that will not automatically sync to Tranzi and therefore unable to edit, such as View details, See more/less, text on Quick view button, etc.  ...

    • How to uninstall Quick View completely ?

      UPDATE (15.06.2023) With the stores installing our app after JUNE 15, 2023, the app does not add code to the theme anymore. Therefore, you don't need to remove anything after uninstalling the app. When installing, Quick View adds a script directly to ...

    • How to show Product Availability on Quick view

      To show Availability on quick view, you need to add some code to your theme.  Follow the simple steps below, or contact us to help. Step 1: Go to Online store → Themes → find the theme you want to add availability → Actions → Edit code. Under ...

    • Frequently Asked Questions for Quick View

      What is the difference among Free plan, Basic plan and Premium plan? Please see the comparison table of there plans here. Can I downgrade to Basic after upgrading to Premium plan? Yes you can. To cancel Premium plan, please go to My Profile page > ...