> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/products/quick-shop.md).

# Quick shop

The **Quick shop** features allow customers to view and add your products directly to their cart without needing to navigate to the product page.

* The [Quick add](#quick-add) button adds products immediately to your customer's cart.
* The [Quick view](#quick-view) button reveals a popup with product details and buy button.

## Quick add

***

By default, the Quick add popover displays basic product details, variant selector, and quantity selector.

{% hint style="info" %}
To disable Quick add, go to **Theme settings > Product listing**. Click to uncheck the **Enable quick add** option.
{% endhint %}

Go to **Products > Quick-add** template, then Click the **Product quick add** section to find the following settings.

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show divider</mark></td><td>Show border line beneath the product details.</td></tr><tr><td><mark style="color:blue;">Show vendor</mark></td><td>Show the vendor name beneath the product title.</td></tr><tr><td><mark style="color:blue;">Show SKU</mark></td><td>Show the "Stock-keeping unit" (SKU) number of the product.</td></tr><tr><td><mark style="color:blue;">Show price</mark></td><td>Show the product’s price.</td></tr><tr><td><mark style="color:blue;">Show discount</mark></td><td>Show discount amount as set up in the 'compare at price' setting in the Shopify admin.</td></tr><tr><td>D<mark style="color:blue;">iscount format</mark></td><td>Choose to display discounts by percentage or currency amount.</td></tr></tbody></table>

Add and edit the following available **blocks**.

<table><thead><tr><th width="206">Setting</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/hIicabehGjM5VGnaSANn">Variant selector</a></td><td>Display variants of product options. Change the Swatch size and the Chip layout.</td></tr><tr><td><a href="/pages/nJua09ODwYBLi2aeNpZL">Stock level indicator</a></td><td>Display stock level bar with 'low inventory' alert.</td></tr></tbody></table>

## Quick view

***

The **quick view button** appears when customers hover over products in collections or sections.

When clicked, the **quick view popup** allows customers to view and add products directly to their cart without going to the product page.

{% hint style="info" %}
To disable Quick view, go to *Theme settings > Product listing.* Click to uncheck the **Enable quick view** option.
{% endhint %}

### Edit Quick view template

***

By default, the quick view popover displays basic product details, variant selector, and quantity selector.

You can change the appearance of the popover by editing the **Quick view template** in the theme editor.

{% stepper %}
{% step %}
In the theme editor, use the template selector to go to **products > quick-view**.
{% endstep %}

{% step %}
Click the **Product quick view** section to find settings for the appearance of the quick view popup.
{% endstep %}

{% step %}
Click the **Blocks** to find settings for the **Variant selector**, **Stock level indicator**, **Quantity selector**, and **Description.**
{% endstep %}
{% endstepper %}

`Open Products > Quick view template to find settings`

<table><thead><tr><th width="219">Setting</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/pGLtLr4jstuNckWDLRjn">Description</a></td><td>Display product description as a paragraph or accordion.</td></tr><tr><td><a href="/pages/hIicabehGjM5VGnaSANn">Variant selectors</a></td><td>Display variants of product options. Includes options for <a href="/pages/aQ9sXsgyW6pLVvodyafU">Information popup</a>, <a href="/pages/icEbZO563kl4UGPTX0fD">Variant swatches</a>, and <a href="/pages/q9k1M30HenITCM5k7E0u">Variant chips</a>.</td></tr><tr><td><a href="/pages/RVpzMYikBQAi7Xi4Pabo#show-quantity-selector">Quantity selector</a></td><td>Let customers add more quantities of a product.</td></tr><tr><td><a href="/pages/laGj8c1YtF0aPyKcKKvE">Share icons</a></td><td>Social links for sharing your product page.</td></tr><tr><td><a href="/pages/nJua09ODwYBLi2aeNpZL">Stock level indicator</a></td><td>Display stock level bar with 'low inventory' alert.</td></tr><tr><td><a href="/pages/Vn8pZpnzIXn9aCiXvp7l">Text</a></td><td>Add a short block of text.</td></tr><tr><td>Show divider</td><td>Show border line beneath the product details.</td></tr><tr><td>Show vendor</td><td>Show the vendor name beneath the product title.</td></tr><tr><td>Show SKU</td><td>Show the "Stock-keeping unit" (SKU) number of the product.</td></tr><tr><td>Show discount</td><td>Show discount amount as set up in the 'compare at price' setting in the Shopify admin.</td></tr><tr><td>Discount format</td><td>Choose to display discounts by percentage or currency amount.</td></tr><tr><td>Show sale badge</td><td>Show sale label for products that have a Compare at price set in your Shopify admin.</td></tr><tr><td>Show custom badges</td><td>Show custom badges added to your theme settings. See the <a href="/pages/RCIKzuWhXQZ2v9iyFtdH">Product badges guide</a>.</td></tr></tbody></table>

***

> **Related links**
>
> [Product listings](/cornerstone/products/product-listings.md)\
> [Product listing style](/cornerstone/products/product-listings/layout-and-style.md)\
> [Product card details](/cornerstone/products/product-listings/product-card-details.md)\
> [Product badges](/cornerstone/products/product-badges.md)