The Quick Shop feature allows customers to view and add a product to their cart without leaving the Collection page or a Featured Collection section. The Quick Shop button will show up when a user hovers over product thumbnails images, where they can then click to open.
Located in the Quick shop portion of the Theme settings, the Enable quick shop setting is activated by default. Customize the quick shop's content by adjusting the template's settings, blocks, and theme settings.
Template Settings
Customize the content of the quick shop's modal window by opening the template in the theme editor.
Use the page selector to open Products, then quickshop.
Click the Product section to open general settings for the template.
Media position
You can choose the Media position to either display your product image gallery on the Left or Right side of the page.
Product media height
Adjust the Product media height using the provided slider to cap the height of the media at a minimum of 200px and a maximum of 800px.
Looped video
Have your videos automatically repeat when finished by activating Enable video looping. This only applies to videos added through the Media portion of Products.
Show arrows
Activate Show arrows to have previous/next arrows appear when customers hover their cursor over your product media. These arrows are used to navigate through the sequence of product media.
Lightbox
Allow customers to open the product image in a modal window by activating Enable lightbox.
Image zoom
Activate an image zoom feature for the product media by enabling Magnify product images on hover.
Gallery transitions
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.
Thumbnails
To display the product's thumbnail images, enable Show thumbnails.
Use the Thumbnails position to display the thumbnails to the Left of main image, Right of main image, or Below main image.
Thumbnail slider
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.
Template Blocks
Select and customize the individual page blocks.
There are no settings to customize for Title, Description, Vendor, Quantity, SKU, and Share blocks. Click, hold, then drag the blocks to reorder their sequence and reposition them on the quick shop template.
Price block
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.
Form block
Enable the Show dynamic checkout button setting to allow customers to easily checkout. They skip the cart and complete their payment with the checkout method displayed on the button.
Product links blocks
Use the Product links block to control the position of the product. Click the block to open its settings.
Display the collection(s) that include this product by enabling Show collections. This displays below the product form.
Enable Show tags to display the tags assigned to the product. These display below the product form as button-like links.
Activate Show type to display the Product type information for the product. Assign this to your products by editing the Organization portion of your Products admin.
Size chart block
Include a Size chart for the quick shop template by adding the Size chart block. Click to open the block, then click Select page below Size chart.
Text block
Include more messaging to the quick shop template by adding a Text block.
Add copy to the Text field. Then use the Bold, Italic, and Link controls to style and connect your text with other pages.
Quick Shop Theme Settings
Show price savings
If your product is on sale, you can enable the Show price savings to display how much your customer is saving (both percentage and price amount).
Show dynamic checkout button
Enable Show dynamic checkout button to include Shopify's dynamic checkout button in your Quick Shop.
Truncate description
By default, the product description in the 'quick shop' will display the full product description, however, if you'd like the description to be shortened, you can enable the Truncate description setting.
Then adjust how many words will display with the Quick shop description truncated words (between 1-50) setting. Choose from 1 to 50 on the slider.