Creative / Theme settings / Set up Quick Shop on your store
Quick Shop is a ‘quick buy’ feature that gives your visitors the ability to swiftly view products, select variants and add them to their cart or buy instantly. They can do this without the need to visit individual product pages. This feature is intended to keep shoppers in the buying flow with minimal interruptions or distractions.
Quick Shop locations
- Collection pages
- Featured collection sections
- Related products sections
- Complimentary Products blocks on the product page
Types of Quick Shop modals
The buying action 'form' or 'modal' - with product image, product options, add-to cart or buy now buttons - can be presented in various ways
- A slide out side drawer - used on desktop devices
- A slide up drawer - used on mobile devices (image below)
- A floating modal that appears on mouse hover - used on desktop devices
Quick Shop triggers
The Quick Shop modals can be triggered in the following ways:
- Button - always visible on all devices
- Button - always visible on mobile, only visible on desktop when hovering your mouse
- Icon - always visible on all devices
- Icon - always visible on mobile, instant pop up modal visible when hovering your mouse
You can also choose between a solid and outline button style.
Activate Quick Shop on your store
Click the Customize button in the Themes area of your Shopify admin. This will take you to the theme editor.
Once the editor is open navigate to any product grid on your store such as a collection page or activate a product grid section such as Featured Collection.
- Click on the Theme settings button in the theme editor's left sidebar.
- Click on the Quick Shop option in the theme settings menu.
- From here, ensure that the Enable quick shop box is checked
- Click on Save and check your work.
Overview of Quick Shop settings
- Enable quick shop - turns the feature on and off
- Quick shop trigger - changes the way the user interacts/triggers the feature - i.e icon/buitton
- Product grid button - solid or outline button style options
- Show cart after adding product - Checking this box will show the cart each time a customer adds a product to the cart
- Product variant style - Here you can choose how your product variants are displayed, the Buttons and Dropdowns options are automatically available, to set up color swatches, please see the article linked below
- Enable quantity selector - This will activate a quantity selector within the modals, allowing customers to choose the amount of one product selection that is added to the cart. Turn this off if your modals are getting too tall.
- Show dynamic checkout button - A payment button will appear that allows customers to go directly to the checkout, this button will be specific to each customer's preferred payment method, to learn more about this, click please visit the Shopify Help Center - Dynamic checkout buttons
- Show inventory notice - This will display a notice on the product modal when your product reaches a pre-determined stock level.
- Low stock notice threshold - Here the slider can be used to select the stock level where the inventory notice will be displayed.
- Display stock number - Selecting this will show the exact amount of stock left on the inventory notice.
Many customers like to add lots of products to their cart and then edit it later, you can make this process distraction-free by unchecking the Show cart after adding product box. By doing this your customers won't be interrupted by the cart page until they are ready to navigate to it themselves and edit their order and of course, make their purchase.