Using the Quick Shop Feature on eComm Performance
Using the Quick Shop Feature
The 'Quick Shop' feature gives customers the ability to quickly add a product to their cart without ever having to leave the Collection page!
To enable the 'Quick Shop' button, go into Customize (your Theme Editor) > Theme Settings > Quick Shop > Enable Quick Shop.
Quick Shop Settings
- Popup Quick Shop
If you want to select the popup quick shop style, after you've enabled the quick shop, choose the 'popup' option in the 'style' setting:
Inline Quick Shop
If you'd like to select the inline quick shop style, after you've enabled the quick shop, choose the 'inline' option, located in the 'style' setting:
Show Dynamic Checkout Button.
After setting up the Quick Shop, you can enable Shopify's 'dynamic checkout button' to show in your Popup Quick Shop. This can be done by selecting the 'Show dynamic checkout button' setting.
- When you have the 'Popup Quick Shop' feature enabled, you can determine what product information you'd like to display.
Show Vendor
You have the ability to 'show vendor,' which will display the name of the vendor and brand if you have added one through the product admin page. If you enable this setting, the vendor and brand name will appear above the product title.
Show Price Savings
If you have a product on sale, you have the option to enable the 'show price savings,' which will display how much your customer is saving - both percentage and price amount. When you have this setting enabled, the savings will be shown below the product price.
Magnify Product Images on Hover
If you'd like to give your customers the option to zoom in closer to the product images, you can enable the 'magnify product images on hover' feature, which will zoom in on the image when a customer hovers over it.
Show Full Product Description
The product description in the 'quick shop' will be truncated by default. However, if you want the full description to be shown, you can enable that feature by selecting the 'show full product description' setting.
Quick Shop Description Truncated Words
If you decide not to show the full description for a product, you can adjust how many words you want to display with the 'quick shop description truncated words' setting. You can choose from 1 to 50 on the slider.
Description Position
The 'description position' feature lets you arrange your description's placement to be either above or below the add to cart button.
Show Arrows on Product Gallery
When you have the 'show arrows on product gallery' setting enabled, it will display subtle previous/next arrows on the product gallery when a customer hovers over the image.
Gallery Transition
When you have product gallery images, you can select your 'gallery transition' to either slide or fade.
Gallery Position
You have the option to display your product image gallery on the left side or the right side of the quick shop. This can be done when choosing the 'gallery position.'
Show Product Gallery Thumbnails
You have the option to display all of your product images in the 'quick shop.' This can be done when you select the 'show product gallery thumbnails' setting, which will display the images as thumbnails.
Thumbnail Position
If you have the thumbnails enabled, you can choose where you would like to position them. You have the option to choose from left, right, bottom (grid), or bottom (slider). If you choose either the left or right positions, both will display vertically. If you choose the bottom position, it will display horizontally. For the bottom (slider) option, the slider will only kick in when you have 7 or more thumbnail images.
Example
Here's how we set up our 'Popup Quick Shop' in our demo shop for eComm Performance!
- Quick Shop Settings
Show price savings - enabled.
Show full product description
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)
Mobile layout
The 'Popup Quick Shop' does not display on a mobile device or tablet. Since you cannot hover over images on those devices, once you click on a product image on any Collection page, you will be automatically redirected to that product page.
Related Articles
Gallery Section in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Gallery Section The eComm Performance theme has a section where you can display only images! The 'Gallery' section is a great way to ...Using the Video Section in eComm Performance
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. How to Use the Video Section The eComm Performance theme has a 'Video' homepage section, which gives you the ability to creatively enhance ...Footer Guide eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Footer Section The eComm Performance theme has a customizable 'Footer' section that lets you add up to 5 vertical columns. You can ...Adding a Size Chart to the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Making Use of the Size Chart Feature The eComm Performance theme includes a 'Size Chart' feature that you can have in your 'product form' on ...Collection Page Sidebar on the eComm Performance Theme
Supported Versions: The details shared in this article apply to the most updated version of eComm Performance. Using the Collection Page Sidebar eComm Performance's Collection pages has the ability to display a 'sidebar' on the collection page. ...