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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/products/quick-shop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.