Supported Versions
The details shared here apply to the most recent version of Turbo. 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 add a product to their cart without having to leave the Collection page! 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 > 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.
Show vendor
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.
Show full product description
By default, the product description in the 'quick shop' will be truncated, however, if you'd like the full description to display, you can enable the 'show full product description' setting.
Quick shop description truncated words
If you choose to not show the full description, you can adjust how many words will display with the 'quick shop description truncated words' setting. Choose from 1 to 50 on the slider.
Description position
The 'description position' lets you move the placement of your description either above or below the add to cart button (product form).
Show arrows on product gallery
When enabled, the 'show arrows on product gallery' setting will display subtle previous/next arrows on the product gallery when hovered over the image.
Gallery transition
For your product gallery images, you can select your 'gallery transition' to be either slide or fade.
Gallery position
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.
Thumbnail position
If you've enabled the thumbnails, you can choose where you'd like to position them! Choose from left, right, bottom (grid), or bottom (slider). The left and right positions will display vertically. The bottom positions display horizontally. For the bottom (slider) option, the slider will kick in when you have 7 or more thumbnail images.
Examples
Here's how we set up the 'Quick Shop' feature in our demo shops for Turbo!
-
Portland
Quick Shop SettingsShow price savings - enabled
Quick shop description truncated words - 25
Description position - above product form
Show arrows on product gallery - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom (grid)
-
Seoul
Quick Shop SettingsShow price savings - enabled
Quick shop description truncated words - 25
Description position - above product form
Show arrows on product gallery - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom (grid)
-
Florence
Quick Shop SettingsShow price savings - enabled
Quick shop description truncated words - 25
Description position - above product form
Show arrows on product gallery - enabled
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom (grid)
-
Chicago
Quick Shop SettingsShow price savings - enabled
Quick shop description truncated words - 25
Description position - below product form
Gallery transition - slide
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - left
-
Dubai
Quick Shop SettingsShow price savings - enabled
Show dynamic checkout button - enabled
Magnify product images on hover - enabled
Quick shop description truncated words - 25
Description position - above product form
Show arrows on product gallery - enabled
Gallery transition - fade
Gallery position - left
Show product gallery thumbnails - enabled
Thumbnail position - bottom (grid)
Mobile layout
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.