Customizing Quick view

Quick view is a feature powered by Boost Commerce that allows you to get a quick preview of a product before checkout. By customizing the popup in Theme settings, you can create a more engaging and dynamic shopping experience for your customers.

These below settings only work with the new front-end lib V3 from Boost Commerce, and with both free and paid themes from Shopify’s theme.

On this page

Access Quick view settings

To access the Quick view settings, please follow these steps:

  1. From the app's admin, go to Theme > Find [Target Theme] > Select Edit Visual Design.

  1. On the left panel, select Product item to expand and choose Quick view in the drop-down list. Once you have chosen the Quick view section, the detailed settings for Quick view will appear on the right panel.

Quick view configuration

  • Note: when customizing any attribute on the right sidebar⇒ the preview pop-up show the corresponding changes.

To learn about how to see all settings for Quick view applied on storefront, click here.

Product Image

This settings section applies for Product image in Quick view.

  • Enable Product image in Quick view pop-up: display Product image (both main & thumbnail in pop-up)
  • Thumbnail position
    • Above
    • Below

Button Overall

These settings will be applied for both Add to cart and Buy it now button in the Quick view feature.

  • Button shape: you can select between the Rectangle and Rounded rectangle shapes.
  • Font
    • Font family: choose a font family for the two buttons
    • Font style: choose the preferred font style from the selected font family
    • Font size: use the slider or input your preferred size in pixels (range from 10 - 30)

Add To Cart button

This settings section applied specifically to Add to cart button in the Quick view feature.

  • Color
    • Text color: pick a color for the text of the button
    • Text color on hover: pick a color for the text when hovering on the button
    • Background color: pick a color for the button’s background
    • Background color on hover: pick a color for the button's background when hovering.
    • Border color: pick a color for the border of the button
    • Border color on hover: pick a color for the button's border when hovering.
  • Text
    • Text transform
      • none  leaves the text’s case and capitalization exactly as it was entered.
      • lowercase  makes all of the letters in the selected text lowercase.
      • uppercase  makes all of the letters in the selected text uppercase.
      • capitalize  capitalizes the first letter of each word in the selected text.

Buy It Now button

This settings section applied specifically to Buy it now button in the Quick view feature.

  • Color
    • Text color: pick a color for the text of the button
    • Text color on hover: pick a color for the text when hovering on the button
    • Background color: pick a color for the button’s background
    • Background color on hover: pick a color for the button's background when hovering.
    • Border color: pick a color for the border of the button
    • Border color on hover: pick a color for the button's border when hovering.
  • Text
    • Text transform
      • none  leaves the text’s case and capitalization exactly as it was entered.
      • lowercase  makes all of the letters in the selected text lowercase.
      • uppercase  makes all of the letters in the selected text uppercase.
      • capitalize  capitalizes the first letter of each word in the selected text.

Click Save button to save all changes you have made.