Customize the features, content, and styling for the Quick shop, a modal window providing a stripped-down version of the product page. With this feature, customers can select variants, then add their selection to the cart without leaving the collection page.
Use the theme editor to enable the feature, then customize the template to build and customize your quick shop.
Enable quick shop for collection page template
In the theme editor (Customize), use the page selector to open Collections, then Default collection or another collection page template.
In the left sidebar, click to open Collection pages. Locate the Overlay / hover interaction setting and adjust it to Quick shop.
Customize the quick shop's content
Use the page selector to open Products, then quickshop.
You don't have to assign this template to any product: You will notice that it is assigned to 0 products by default. This is an expected behavior.
In the left sidebar, click the toggle beside Quick shop to reveal its blocks.
Arrange the blocks in the preferred order. There are blocks for product Vendor, Title, Price, Form, Description, Social, Custom liquid, Tabs, Collapsible tabs, and Product rating.
Custom liquid
Add a Custom liquid block to inject custom code through a template block.
Use the Custom liquid field to include Liquid-formatted code.
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.
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.
Customize general settings
Click to open the Quick shop section for product media controls and other settings.
Gallery layout
Control the product media layout with the Layout dropdown. There are three options to choose from: Slideshow, Masonry, or List.
Activate image zoom
Enable image zoom by checking that option. Enabling this will mean that when a user hovers over a product image, a magnifying glass icon will appear and they will be able to click to get an up-close look at your product.
This feature only works when the slideshow layout is selected from the menu above. It also requires that merchants use large, high-res product photography with widths above 1600px.
Redirect customers to the cart with ATC
Enable cart redirection will bring the customer to the Cart page after the add-to-cart (ATC) button has successfully added an item. This can help streamline the purchasing process, especially if you have a smaller catalog.
Disabling AJAX
Enabling cart redirection is the same as disabling AJAX. The default behavior for adding items to the cart is to be brought to the cart page immediately upon completion. Activating cart redirection restores this behavior.
Activate dynamic checkout button
Enable dynamic checkout button adds a secondary cart button that offers customers an option to proceed directly to the Checkout page—bypassing the cart page entirely and completing the purchase with a preferred payment type.