The Quick Add Modal in Maison lets customers view product details and select product options without leaving the product listing page.
Maison uses the same modal for two related Product card actions:
- Quick view — opens the product in the modal.
- Quick add — adds a single-variant product directly to the cart, or opens the product-selection experience for products with multiple variants.
The Quick Add Modal is controlled from the Buy buttons block inside a Product card. There is no separate global Quick Add Modal setting.
Section overview
The Product card Buy buttons block includes:
| Setting | Description |
|---|---|
| Show quick add | Displays the Quick add / Select options action on Product cards. |
| Show quick view | Displays the Quick view button and enables the modal experience. |
| Show compare | Displays the Compare action when Product comparison is enabled. |
| Show wishlist | Displays the Wishlist action when the SHOPLINE Wishlist app is available. |
| Size | Controls the width and height of the Product card Buy buttons area. |
The behavior of Quick add depends on the product:
| Product state | Behavior |
|---|---|
| Available product with one variant | Adds the product directly to the cart. |
| Available product with multiple variants + Show quick view enabled | Displays Select options and opens the Quick Add Modal. |
| Available product with multiple variants + Show quick view disabled | Displays Select options and opens the product page. |
| Sold-out product | Displays Sold out and links to the product page. |
STEPS:
Enable Quick add on Product cards
Quick add is configured inside the Product card structure of the section where products are displayed.
- Open the Maison theme editor.
- Open the section that contains Product cards.
- Expand the Product card settings.
- Open Buy buttons.
- Enable Show quick add.
- Click Save.
Depending on the section, Product cards can appear in areas such as:
- Collection product lists
- Featured collection sections
- Search results
- Product recommendations
- Other product-grid or product-slider sections
Enable the Quick Add Modal
For multi-variant products, the Quick Add Modal requires Show quick view to be enabled.
- Open the relevant Product card.
- Select Buy buttons.
- Enable Show quick add.
- Enable Show quick view.
- Click Save.
When both settings are enabled:
- Single-variant products can still be added directly to the cart.
- Multi-variant products display Select options.
- Selecting Select options opens the product inside the Quick Add Modal.
Enable the Quick view button
The Show quick view setting also adds a dedicated Quick view button to each Product card.
- Open the relevant Product card Buy buttons block.
- Enable Show quick view.
- Click Save.
Customers can select the Quick view icon to open the product inside the same modal used by multi-variant Quick add.
Quick view can be used independently from Show quick add.
For example:
| Show quick add | Show quick view | Result |
|---|---|---|
| Off | Off | No Quick add or Quick view controls. |
| On | Off | Single-variant products can be added directly; multi-variant products link to the product page. |
| Off | On | Quick view opens the product modal, but there is no separate Quick add action. |
| On | On | Full Quick add + Quick view experience. |
Understand single-variant Quick add
If a product:
- Is available, and
- Has only one variant
Maison does not need to open the modal.
Selecting Add to cart:
- Adds quantity 1 of the product directly to the cart.
- Uses the product's available variant automatically.
- Displays the normal loading state while the request is processed.
This provides a faster purchasing flow for simple products.
Understand multi-variant Quick add
If an available product has multiple variants, Maison displays:
Select options
The next action depends on Show quick view.
Show quick view enabled
Selecting Select options opens the Quick Add Modal.
Customers can review the product and choose the required options without leaving the current listing page.
Show quick view disabled
Selecting Select options opens the full product page.
This allows customers to choose their options on the normal Product template instead.
Understand the content inside the Quick Add Modal
When the modal opens, Maison loads the selected product's Product detail content.
This means the modal can reflect the product information and purchase controls configured for that product's Product template, such as:
- Product media
- Product title
- Price
- Variant picker
- Quantity selector
- Buy buttons
- Other supported Product information blocks
Because the modal is based on the product's Product detail layout, changes made to the relevant Product template can also affect what customers see in Quick view.
Understand Product media behavior in the modal
Maison loads the Product media gallery inside the Quick Add Modal.
However, the full media preview behavior is disabled inside the modal.
Customers can review the product media included in the Product detail layout, but clicking the media does not launch the same expanded media-preview experience used on the full Product page.
This helps keep the Quick Add Modal focused on selecting options and purchasing the product.
Understand variant selection
For a multi-variant product, customers can select the available product options inside the modal.
When the selected combination changes, Maison updates the variant state.
If the selected variant is available, the purchase action remains enabled.
If the selected combination is unavailable, Maison updates the state to:
Unavailable
If the selected variant exists but is sold out, Maison updates the state to:
Sold out
This prevents customers from adding an unavailable variant.
Understand Add to cart behavior from the modal
After customers select an available variant, they can use the Product form inside the modal to add it to the cart.
Maison uses the normal Product form behavior for the selected variant.
The modal can also initialize supported SHOPLINE payment-button functionality when it is present in the Product detail content.
After the product is added, the rest of the cart behavior follows the store's configured Maison cart experience.
Understand app blocks in Quick view
The Quick Add Modal does not reproduce every Product-page app block exactly as it appears on the full Product page.
Maison removes unsupported Product detail app-block content from the modal to avoid broken or duplicated app experiences.
For product reviews, Maison can replace the full review app content with the product-card-style rating display where applicable.
Understand the Sticky buy button
The Product page Sticky buy button is not displayed inside the Quick Add Modal.
The modal uses the Product form and purchase controls within the loaded Product detail content instead.
This prevents duplicate purchase controls from appearing inside the modal.
Close the Quick Add Modal
Customers can close the Quick Add Modal by:
- Selecting the Close button.
- Selecting outside the modal where the modal mask is available.
- Pressing Esc on a keyboard.
When the modal closes, Maison clears the loaded Product detail content so the next product can be loaded cleanly.
Any playing product video is also paused when the modal closes.
Configure Quick Add on multiple product sections
If your store uses Product cards in several sections, configure Quick add separately for each one.
For example:
- Collection Product list
- Search results
- Featured collection
- Product recommendations
- Related products
For each section:
- Open the section.
- Expand Product card.
- Open Buy buttons.
- Enable Show quick add.
- Enable Show quick view if you want the modal.
- Save the section.
This lets you use different Product card purchasing behavior in different areas of the storefront.
Quick add vs. Quick view
Although both features can use the same modal, they serve different purposes.
| Feature | Purpose |
|---|---|
| Quick add | Provides a fast purchasing action from the Product card. |
| Quick view | Lets customers open and review Product detail content without leaving the current page. |
| Quick Add Modal | Provides the modal interface used by Quick view and by multi-variant Quick add when Quick view is enabled. |
For a product with one variant, Quick add does not need the modal.
For a product with multiple variants, the modal lets customers select the required options before adding the product.
Recommended setup
For the most complete Product card experience:
- Enable Show quick add.
- Enable Show quick view.
- Keep the Product template's important purchase information concise and easy to use.
- Test both single-variant and multi-variant products.
- Test sold-out and unavailable variants.
- Configure the same settings separately in each Product-card section where needed.
Troubleshooting
If the Quick Add Modal does not work as expected, check the following:
- Make sure the relevant Product card contains a Buy buttons block.
- Enable Show quick add if the Quick add / Select options action is missing.
- Enable Show quick view if you want multi-variant Select options to open the modal.
- If a multi-variant product opens the Product page instead of the modal, check whether Show quick view is disabled.
- If a single-variant product does not open the modal, this is expected. Maison adds it directly to the cart.
- If a sold-out product opens the Product page, this is expected behavior.
- If the dedicated Quick view button is missing, enable Show quick view.
- If modal content differs between products, check which Product template each product uses.
- If an app block is missing inside Quick view, remember that Maison removes unsupported Product-page app blocks from the modal.
- If the Sticky buy button is missing, this is expected inside the Quick Add Modal.
- If expanded media preview does not open, this is expected because media preview is disabled inside the modal.
- If the Add to cart action becomes disabled after choosing options, check whether the selected variant is unavailable or sold out.
- Configure Product card Buy buttons separately in each section where products are displayed.
- Save your changes and test Quick add on both desktop and mobile.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up Facets and Filters in Maison
How to Set Up Inventory Status in Maison