Design Quick View Button

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 'Quick View', but you can change it by typing in the Button text section.

Position

This feature helps you put Quick View button on any position on the image. Click on the position bar to choose from the list.
  1. Top left
  2. Top right
  3. Center
  4. Bottom left
  5. Bottom right
Choosing position prevents Quick View button from overlaping default button of your theme.

Button on Mobile


Button Action

On mobile, you can choose to always show/hide this button, or only show it when your customers tap the product image by choosing 'Tap image to show'.

Position

This feature is similar to Position on Desktop.

On mobile, only button icon will be displayed (button text is not available). 
Button position is also different from the one set on desktop in case they may overlap each other.

Style

Color


You can change color of button and button text by entering color code on the bar or clicking on the rounded square on the right to choose from color palette.

You can also choose different colors for button background and text when hovering on Quick View button.


Border radius

The corner of the button can be rounded and you can choose border radius, or choose 'None' to display the button in a regular rectangle shape.

Button z-index

z-index represents stacking order when you have numerous buttons.

Enter the number in the bar in the section to customize stacking order of the button.

    • Related Articles

    • 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. ...

    • 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 ...

    • 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 > ...

    • 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 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 ...