In this article:

1. Introduction
2. How it works?
3. Conditions
4. How to enable quick Add-To-Cart modal
5. How to disable quick Add-To-Cart modal

1. Introduction

Quick Add-To-Cart modal is a small window that pops up when a customer clicks the Add-To-Cart button on a product listing page, such as a collection or cart page. This modal allows customers to view available variants or options of the product — whether they are adding or editing an item — without leaving the current page. This streamlines their shopping process and improves the overall user experience.

2. How it works?

Product Listing section / page

2.1 In product listing, customer clicks Add-To-Cart button and the modal will pop up, customer can select their variant or option and add to cart without leaving the page.

Including:

• 'Featured collection' section in home page
• Collection page

Cart page

2.2 In cart page, customer clicks the Edit button (pencil icon) and the modal will pop up, customer can edit their variant or option and update cart without leaving the page.

3. Conditions

3.1 Add-To-Cart modal will pop up only if the product:

• Has variants
• Has product properties (refer to Product Property App)

3.2 When clicking Add-To-Cart button:

• If the product has variants or properties → the Add-To-Cart modal will pop up
• If the product has no variants or properties → the item itself will be added to cart

4. How to enable quick Add-To-Cart modal

If you notice your store don't have Add-To-Cart modal yet, you can enable it following the steps below:

1. Go to Channels > Online store > Themes > Edit source > layout/theme.liquid
2. Search for {% app_snippet 'global/body_end' %}
3. Add {% include 'product-quickview-modal' %} above it

4. This step is only needed for themes starting from Aroma or newer.

Search for the code from

window.variantStrings = {

to

shareSuccess: `{{ 'general.social.copied_success_message' | t }}`,
    }

Replace it with codes below.

window.variantStrings = {
      addToCart: `{{ 'products.product.add_to_cart' | t }}`,
      updateCart: `{{ 'cart.general.update' | t }}`,
      soldOut: `{{ 'products.product.sold_out' | t }}`,
      unavailable: `{{ 'products.product.unavailable' | t }}`,
    }

    window.accessibilityStrings = {
      shareSuccess: `{{ 'general.social.copied_success_message' | t }}`,
    }

    window.promotionStrings = {
      title: `{{ 'products.product.promotion' | t }}`,
    }

    window.productSettings = {
      variantOptionsDisplay: `{{ settings.sections.main-product.settings.variant_options_display | _default: 'radio' }}`,
    }

5. How to disable quick Add-To-Cart modal

If you notice your store already have Add-To-Cart modal but you wish to disable it, you can follow steps below:

1. Go to Channels > Online store > Themes > Edit source > layout/theme.liquid
2. Search for {% app_snippet 'global/body_end' %}
3. Remove {% include 'product-quickview-modal' %}

Updated on: 15/07/2025