# 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="../product-pages/product-page-blocks/variant-selector">Variant selector</a></td><td>Display variants of product options. Change the Swatch size and the Chip layout.</td></tr><tr><td><a href="../product-pages/product-page-blocks/stock-level-indicator">Stock level indicator</a></td><td>Display stock level bar with 'low inventory' alert.</td></tr></tbody></table>

&#x20;

## Quick view

***

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

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

{% 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 %}

&#x20;

`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="../product-pages/product-page-blocks/description">Description</a></td><td>Display product description as a paragraph or accordion.</td></tr><tr><td><a href="../product-pages/product-page-blocks/variant-selector">Variant selectors</a></td><td>Display variants of product options. Includes options for <a href="../product-pages/product-page-blocks/information-popup">Information popup</a>, <a href="../product-pages/variant-options/variant-swatches">Variant swatches</a>, and <a href="../product-pages/variant-options/variant-chips">Variant chips</a>.</td></tr><tr><td><a href="../../product-pages/product-page-blocks/buy-buttons#show-quantity-selector">Quantity selector</a></td><td>Let customers add more quantities of a product.</td></tr><tr><td><a href="../product-pages/product-page-blocks/share-icons">Share icons</a></td><td>Social links for sharing your product page.</td></tr><tr><td><a href="../product-pages/product-page-blocks/stock-level-indicator">Stock level indicator</a></td><td>Display stock level bar with 'low inventory' alert.</td></tr><tr><td><a href="../product-pages/product-page-blocks/text-block">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="product-badges">Product badges guide</a>.</td></tr></tbody></table>

***

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