The Quick Shop is a dynamic feature for customers to add products to their cart without leaving the collection page.
Use the theme editor to activate the Popup or Inline style. Customize the content of the Popup option with the popup template settings.
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.
The Turbo theme includes two quick shop styles: Popup and Inline. Enable the popup style for a button to display when a user hovers over product thumbnail images, where they can then click to open. Enable the inline style for the product variants, add-to-cart, and dynamic checkout button to display below the product thumbnail image.
Customize Template
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 Share, Text, Vendor, Tabs, Collapsible tab, Custom Liquid, Pop-up, Product links, Product rating, and SKU.
Price block
Click the Price block to enable or disable Show price savings.
Description block
Click the Description block to customize the truncation. Enable Truncate description to shorten the description after a set number of words. Use the Truncated words range finder to adjust the number of words.
Collapsible tab
Add a Collapsible tab block to include product information in an engaging container. Similar to FAQ toggles or accordions, the collapsible tab keeps the Heading visible and reveals the Text when clicked.
Tabs
Add Tabs to showcase information in an interactive layout.
Three tabs by completing the Heading and Text fields.
To include the product's description, enable Show product description.
Position the tabs below the product gallery by enabling Show tabs below product gallery.
The same content will appear for each product using a template. To provide different content for different products, use the classic tabs approach, consider creating additional templates, or use metafields.
Customize Template Settings
Click the Quick shop 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
Select either Slide or Fade for the Gallery transition setting.
Use the Gallery speed slider to adjust the duration for each slide's visibility.
Product media position
You can choose the Product media position to either display your product image gallery on the Left or Right side of the quick shop.
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.