The Quick Shop is a dynamic feature for customers to add products to their cart without leaving the collection page.
The Turbo theme includes two quick shop styles: Popup and Inline. If you enable the popupquick shop style, a button will show up when a user hovers over product thumbnails images, where they can then click to open. If you enable the inline quick shop style, the product variants, add to cart and dynamic checkout button (if enabled) will appear below the product thumbnail image.
Product Grid Settings
Go to the Theme settings to open Product grid. Under Quick shop, select Enable quick shop.
Under Style, select either Inline or Popup.
Popup Template Settings
For the Popup style, the modal window is customized as a template with sections and blocks.
Use the page selector to open Products, then quickshop.
Rearrange the Title, Price, Description, and Form blocks to create the desired layout. You can also add a block for Vendor, Text, and Apps.
Click to open the Quickshop section to open the settings.
Product media position
Select either Left or Right for the Product media position.
Set product media height
To cap the product media with a set height, activate Set height of product media, then use the Product media height slider to control the maximum height.
Show thumbnails
To display all of your product media in the quick shop, select the Show thumbnails setting to display the images as thumbnails.
Show arrows
When enabled, the Show arrows setting displays 'previous' and 'next' arrows for the product media on cursor hover.
Magnify product images on hover
For customers to zoom in to view the product images more closely, enable the Magnify product images on hover.
Transition
For your product gallery images, you can select your 'gallery transition' to be either slide or fade.
Use the Gallery speed slider to
Product media position
You can choose the Product media position to either display your product image gallery on the left side of the quick shop, or the right.
Thumbnails position
Control the Thumbnails position with the provided dropdown. The options are Left of main image, Right of main image, or Below main image. The left and right positions will display vertically. The bottom positions display horizontally.
Enable thumbnail slider
To gather the thumbnail images in a slideshow-like container, activate Enable thumbnail slider.
Mobile layout
The Popup style does not display for mobile devices. 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. However, the 'Inline Quick Shop' does display on mobile.
