The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Quick Shop Feature
The 'Quick Shop' feature allows customers to easily and quickly view and add a product to their cart without having to leave the Collection page or a Featured Collection section! If you enable the 'Quick Shop' a button will show up when a user hovers over product thumbnails images, where they can then click to open.
To enable the 'Quick Shop' head into Customize (your Theme Editor) > Theme Settings > Product Grid > Quick Shop > Enable Quick Shop.
Quick Shop Settings
The 'Quick Shop' settings determine what product information you'd like to display if you have this feature enabled!
Enable Quick Shop
The 'enable quick shop' setting does just that - enables the quick shop! When enabled, a button will appear when hovering over the product thumbnail images. Clicking this button will then open up the 'quick shop' window.
You can enable the 'show vendor' setting which will display the name of the vendor/brand if you've added one in through the product admin page under Organization > Vendor. If you enable this setting, the vendor/brand name will then appear above the product title.
Show price savings
If your product is on sale, you can enable the 'show price savings' which will display how much your customer is saving - both percentage and price amount. If you enable this setting, the price savings will display below the product price.
Show dynamic checkout button
You can enable Shopify's 'dynamic checkout button' to appear in your Quick Shop as well by clicking the 'show dynamic checkout button' setting.
Magnify product images on hover
If you'd like your customers to be able to zoom in closer on the product images, you can enable the 'magnify product images on hover' which will zoom in on the image on hover.
By default, the product description in the 'quick shop' will display the full product description, however, if you'd like the description to be shortened, you can enable the 'truncate description' setting.
Quick shop description truncated words
If you choose to enable the 'truncate description' setting, you can adjust how many words will display with the 'quick shop description truncated words' setting. Choose from 1 to 50 on the slider.
For your product gallery images, you can select your 'gallery transition' to be either slide or fade.
You can choose the 'gallery position' to either display your product image gallery on the left side of the quick shop, or the right.
Show product gallery thumbnails
If you would like to display all of your product images in the 'quick shop', you can select the 'show product gallery thumbnails' setting to display the images as thumbnails.
You can choose the background color for the 'quick shop' here.
Example 1 - Wink demo shop
Example 2 - Studio demo shop
The 'Quick Shop' feature does not display on mobile/tablet! Since you are not able to hover over images on mobile devices, once you click a product thumbnail image on a Collection page, you will be redirected to the corresponding product page.