> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/theme-settings/inspiredtheme-settings-intro/quick-add.md).

# 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](/articles/collection-pages/product-grid.md), [Featured collection](/articles/sections/theme-sections/featured-collection.md), [Tab collections](/articles/sections/theme-sections/tab-collections.md) and [Product recommendations](/articles/product-pages/product-recommendations.md).

### 1. Open the Quick add settings:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Theme settings** (the gear icon) → **Quick add.**
* Make your changes.
* Click **Save.**
  {% endhint %}

### 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](/articles/theme-settings/inspiredtheme-settings-intro/swatches.md).

### 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.