Quick add
Style the quick add button on product cards, choose its icons and the devices it shows on, and set the swatch shape in the quick view.
The quick add button sits on product cards, so shoppers can buy without opening the product page:
Products with one variant: the button shows the Add to cart icon and adds the product to the cart straight away.
Products with options, such as size or color: the button shows the Choose options icon and opens a quick view panel where shoppers pick their options and add to cart.
On desktop, the button appears when shoppers hover over a product card, and expands to show its label when they hover over the button. On mobile, it's always visible as an icon.
The button isn't shown for sold-out products, products tagged pre-order or preorder, or gift cards.
The Quick add theme settings control how the button looks everywhere. To turn it on or off, use Enable quick add button in each section that shows product cards, such as Product grid, Featured collection, Tab collections and Product recommendations.
1. Open the Quick add settings:
2. Settings
'Choose options' icon: The icon for products with options: Search / Eye.
'Add to cart' icon: The icon for products with one variant: Bag / Cart.
Devices: Show on all devices / Show on desktop only / Show on mobile only.
Quick add button
Button label: The color of the icon and label.
Button background: The color of the button. On hover, the two colors swap.
Quick view swatches
Swatch shape: The shape of color swatches in the quick view panel: Circle / Square / Rectangle. Swatches show for options that have swatches set up. See Swatches.
3. Tips
Pick Button label and Button background colors with strong contrast, so the button is easy to see on top of product photos.
If your product cards are small on mobile, try Show on desktop only to keep cards uncluttered on phones.
Use the same Swatch shape as your product page swatches so the quick view feels consistent.
Was this helpful?