Designing the Quick Add Panel

The Quick add panel enables customers to quickly browse and add multiple products to their cart directly from the product list, without needing to visit each product detail page individually. This feature streamlines the shopping experience, saves time, and encourages higher cart values, especially for customers who know what they want.

This guide will walk you through setting up and using the Quick add panel to enhance your store’s efficiency and improve the user experience.

Enabling the Quick Add Button on the Product List Page

To use the Quick add panel, you must first enable the Quick add product feature in your theme settings. This displays the quick add button or icon directly on your product list, allowing customers to add products to their cart without leaving the page.

1. In your app editor, select the Product list page from the page selector at the top. Then, go to Theme settings and expand the Product list menu.
   
2. Locate the Quick add product section and toggle on Display 'Quick add' button/icon. Then, select the display Style: either Button or Icon and customize the Button text as desired. Once enabled, the quick add button will appear on each product card within the product list.
   

Configuring the Quick Add Panel

After enabling the Quick add button, you can configure the Quick add panel to customize its layout and functionality according to your store’s needs. This panel is especially useful for bulk ordering or repeat customers, helping them make purchases quickly and efficiently. Follow these steps to configure:

1. In your app editor, click the page selector at the top and choose Quick add panel.
   
2. In the configuration panel, you have the following options:
   
   
   • Preview product: Click the triangle icon to select a representative product for previewing your settings.
     
     
     
   • Product information: Four default options are available: Product price, Product title, Style selection, and Quantity selector. These options are set by default and cannot be modified, except that you can choose to hide the Style selection.
     
     To further enhance your design, you can click + Add content to insert a custom component, or click + Create a custom block to create a new one. For detailed instructions on creating custom components, refer to this Help Center article.
     
     
     
   • Floating toolbar: The floating toolbar keeps specific buttons fixed on the screen, allowing users to take action at any time while browsing. By default, it includes a Selected properties component and an Add to cart button that can be hidden.
     
     You can also click + Add content to add a custom component to use as the floating toolbar, or click + Create a custom block to create a new one. For more information on creating custom components, see this Help Center article.
     

Saving and Publishing Your Design 

After completing your edits and confirming that the preview appears as expected, you can use the options in the top-right corner to proceed:

• Save: Temporarily saves your current edits for future updates. This will not affect the live version of your store app.
• Publish > Publish to Snaplook: Publishes the component to Snaplook for preview and testing. Use this option to verify functionality and appearance before making it live. For more information, refer to the related Help Center article.
• Publish > Publish to live App: Publishes your changes to the live version of your store app, making them visible to end users.