The Quick shop feature allows customers to easily and quickly add a product to the cart without having to leave their current page.
Open the Quick shop portion of the Theme settings to activate Enable quick shop.
Select the Icon style to have a plus sign (+) icon display in the bottom-right corner of product thumbnail images upon cursor hover.
Select the Button style for a full-width button to display at the bottom of product thumbnail images upon cursor hover.
Customize the Template
The quick shop's modal window is customized like a product page template. Use the page selector to open Products, then quickshop.
In the left sidebar, click Quickshop to open general settings for the feature.
Include additional product media by enabling Show thumbnails.
Use the Position to display the thumbnails to the Left, Right, or Bottom.
If you have numerous product thumbnail images and want to avoid visual clutter, you can check off the Enable thumbnail slider setting. The slider will activate for products over 6 images, videos, or models.
Include arrows to navigate through the product media by enabling Show arrows.
Activate an image zoom feature for the product media by enabling Magnify product images on hover.
Automate your product media by adjusting the Gallery speed slider. Any value above 0 seconds will cycle through the images, videos, and models like a slideshow. To keep the media static, leave the slider at 0.
If enabled, select a Gallery transition option to have the media Slide or Fade between transitions.
Have your videos automatically repeat when finished by activating Enable video looping. This only applies to videos added through the Media portion of Products.
Customize the Page Blocks
Select and customize the individual blocks for the quick shop. Click the toggle beside Quickshop to reveal the current blocks.
There are blocks for Title, Price, Description, Divider, Form, Vendor, SKU, Size chart, Text, and Product rating.
Click (+) Add block to include the Vendor, SKU, Size chart, Text, Product rating, or additional Divider blocks.
Click the Description block to include a product page link and truncate (shorten) the product description.
Activate Show product link to include a link to the product page.
Select an option from the Product description truncated words to limit the number of words included in the product description.
The options are:
Size chart block
Add a Size chart block to connect the quick shop with a static page.
Click Select page to locate and connect the page.
Add a Text block, then use the Text field to add your messaging.