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