# 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="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FrTDcuVyfpluor92bxNBU%2Fproduct-hover.jpeg?alt=media&#x26;token=ab1773ab-e8d5-4de7-bc47-554fb4a03a64" alt="" width="375"><figcaption></figcaption></figure>

## Quick add

***

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

`Go to Theme settings > Products to find settings`

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

&#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;

![Quick view popup](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-de4fc2795a88205ce24a57e2e2e5587c7455047d%2Fquick-view-desktopMobile.jpeg?alt=media)

&#x20;

`Go to Theme settings > Products to find settings`

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

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

#### Quick view blocks

`Click blocks to find settings`

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><a href="../../product-pages/product-page-blocks/default-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/default-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>.<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="../../product-pages/product-page-blocks/default-blocks#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/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/default-blocks#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>

#### &#x20;Product quick view

`Click Product quick view section to find settings`

<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="../product-pages/product-page-sections/product-reviews">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="product-badges">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>

&#x20;&#x20;

## Change button labels

***

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>

&#x20;

***

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


---

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