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!
The Turbo theme includes two quick shop styles: popup and inline. If you enable the 'popup' quick 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.
The 'popup' quick shop style will not be active on mobile, however, the 'inline' quick shop style will display on mobile devices.
The 'inline' option was added in Turbo 4.2.0. If you are on a previous version (What theme version am I using?), you'll need to update your theme.
To enable the 'Quick Shop' head into Customize (your Theme Editor) > Theme Settings > Quick Shop > Enable Quick Shop.
Quick Shop Settings
-
Popup Quick Shop
If you'd like to choose the popup quick shop style, after you've enabled the quick shop, select 'popup' option in the 'style' setting:
Show dynamic checkout button
You can then enable Shopify's 'dynamic checkout button' to appear in your Popup Quick Shop as well by clicking the 'show dynamic checkout button' setting.
The 'Popup Quick Shop' settings determine what product information you'd like to display if you have this feature enabled!
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.
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.
-
Inline Quick Shop
If you'd like to choose the inline quick shop style, after you've enabled the quick shop, select 'inline' option in the 'style' setting:
Show dynamic checkout buttonYou can then enable Shopify's 'dynamic checkout button' to appear in your Popup Quick Shop as well by clicking the 'show dynamic checkout button' setting.
Product Grid: Show product information on hover
You can adjust some of the product grid settings to add more information to your product thumbnail images when the 'inline' quick shop style is chosen!
By default, the 'product information' will appear when you hover over product thumbnail image. You can, however, disable this setting so the 'product information' displays below the product thumbnail image. Simply uncheck the 'show product information on hover' setting.
Examples
Here's how we set up the 'Popup Quick Shop' 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 'Popup Quick Shop' 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.
However, the 'Inline Quick Shop' does display on mobile:
