> 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/stiletto/products/quick-view.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.

<figure><img src="/files/xLAd9lUeY049RP4qVhPm" alt="" width="375"><figcaption></figcaption></figure>

### <mark style="color:$primary;">Quick add</mark>

The **Quick add** button allows customers to add products immediately to their cart. If products have variants, the button will show "Choose options" and open the Quick view popup when clicked.

{% hint style="info" %}
If both quick add and quick view are enabled, then quick add will take precedence for available products. Unavailable products will show quick view button if enabled.
{% endhint %}

<sub><mark style="color:$info;">Go to Theme settings > Products to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable quick add</mark></td><td>When enabled, the "Quick add" button appears on products across your site that adds products immediately to their cart.</td></tr></tbody></table>

### <mark style="color:$primary;">Quick view</mark>

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.

<img src="/files/zZKlsoU5P8sJkc6kg0L1" alt="Quick view popup" width="563">

<sub><mark style="color:$info;">Go to Theme settings > Products to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable quick view</mark></td><td>When enabled, the "Quick view" button appears on products across your site that opens a popup with product details and buy button.</td></tr></tbody></table>

### <mark style="color:$primary;">Edit Quick view template</mark>

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

#### Quick view blocks

<sub><mark style="color:$info;">Click blocks to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#description">Description</a></td><td>Display product description as a paragraph or accordion.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#variant-selector">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>.<br><br>If you have <a href="https://github.com/fluorescent/kb-stiletto/blob/main/product-pages/variant-options/sibling-product-swatches/README.md">Sibling product swatches</a> set up, those swatches will appear in the section and will change the product media and details when selected.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#quantity-selector">Quantity selector</a></td><td>Let customers add more quantities of a product.</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/hVucMts5nBJ1FhET209o#share-icons">Share icons</a></td><td>Add the <strong>Share</strong> block to display social links for sharing your product page.</td></tr></tbody></table>

#### Product quick view

<sub><mark style="color:$info;">Click Product quick view section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="221">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 discount</mark></td><td>Show discount amount as set up in the 'compare at price' setting in the Shopify admin.</td></tr><tr><td><mark style="color:blue;">Discount format</mark></td><td>Choose to display discounts by percentage or currency amount.</td></tr><tr><td><mark style="color:blue;">Show product rating</mark></td><td>Show star rating from your product rating app.<br><br>Learn more in the <a href="/pages/Gv4517Rg6OOcDjzJI4ML">product review guide</a>.</td></tr><tr><td><mark style="color:blue;">Show sale badge</mark></td><td>Show sale label for products that have a Compare at price set in your Shopify admin.</td></tr><tr><td><mark style="color:blue;">Show custom badges</mark></td><td>Show custom badges added to your theme settings.<br><br>Learn how to set up <a href="/pages/RCIKzuWhXQZ2v9iyFtdH">Product badges</a>.</td></tr><tr><td><mark style="color:blue;">Show recipient information form for gift cards</mark></td><td>Allow customers to send gift cards to a recipient's email on a scheduled date, along with a personal message.</td></tr></tbody></table>

<h2 align="center">Change button labels</h2>

***

By default, the quick view and quick add buttons use default wording: "Quick view", "Add to bag", or "Choose options".

To change these button labels, you can use the **Default theme content editor**.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In the theme editor (**Customize**):

1. Click the **Actions** **`...`** menu at the top of the theme editor.

   > You can also open the Actions menu next to your theme in the **Online store** section of your Shopify admin.
2. Select **Edit default theme content**.
3. Enter the default text into the search bar.
4. Find the text field and replace it with your own wording.
5. Click **Save**.

</details>

***

> **Related links**\
> [Product listings](/stiletto/products/product-listings.md)\
> [Purchase confirmation popup](/stiletto/cart/quick-cart/added-to-cart-popup.md)\
> [Quick cart](/stiletto/cart/quick-cart.md)