# Customize quick purchase bar

The **Quick purchase bar** displays product images, details, and variants for the product. You can customize how the **product information** is displayed, the bar’s **appearance and colors**, as well as select for **various layout options for mobile.**

> You can also enable a [Low inventory warning](#enable-low-inventory-warning), [Live traffic label](#enable-live-traffic-label), and [Promotion banner](promotion-banner).

<figure><img src="https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2FifhGQyTnDDExPMW8aajM%2FATCBar_1.png?alt=media&#x26;token=f6e8d909-38da-4824-bcb4-ad7103cf0323" alt=""><figcaption></figcaption></figure>

## Choose sticky position

Choose from two options for the 'stickiness' of your bar: **Sticky on scroll,** or **Always sticky.**

{% hint style="info" %}
"Sticky" means an element that stays in one place on the screen even when you scroll up and down.
{% endhint %}

<details>

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

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

1. Head to the **App Embed** section of the theme editor.
2. Open dropdown for **Flash Quick Purchase Bar**.
3. Select the option you prefer.\
   ![](https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2FEX80OUfIXBA1eW0O5Vmj%2FATCBar_stickyPosition.png?alt=media\&token=8d478a59-c007-48d9-8ce9-705f26d3d2f9)

</details>

## Set custom colors

The Quick Purchase Bar colors will respect those [set within the Flash Cart app - custom or default](../../style-settings/colors). However, you can choose to customize those separately using the color swatches.

<details>

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

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

1. Head to the **App Embed** section of the theme editor.
2. Open dropdown for **Flash Quick Purchase Bar**.
3. Check off the **Override with custom colors** checkbox.
4.  Click on the swatches for Background and Text and either select a color using the color picker or enter a new Hex code.

    > To add a specific hex code color, click on the field to enter code (e.g. `#FF0000`)

    ![](https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2Fgit-blob-27ffd2e5afc4a96bfb7770b7afa13a7c9f73a2a8%2FQuickPurchaseBar-CustomColors.gif?alt=media)
5. Click **Save**.

</details>

## Edit product thumbnails

In the Quick Purchase Bar, the product image thumbnail appears next to the product details. You can choose to **hide the product thumbnail** or change its **aspect ratio** (shape).

<details>

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

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

1. Head to the **App Embed** section of the theme editor.
2. Open dropdown for **Flash Quick Purchase Bar**.
3. Check off **Hide product thumbnail** if you’d like the image to not appear.
4. Select a **Thumbnail image aspect ratio** to crop the image to be a uniform shape. Either the default **Theme Setting, Square**, **Portrait**, or **Landscape**.\
   ![](https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2FyXAvgJ04ENX5nwNNwsYh%2FATCBar_thumnail.png?alt=media\&token=992e049b-8961-42da-8738-595d65f685f4)
5. Click **Save**.

</details>

## Enable low inventory warning

Choose to show a **Low inventory warning** message for cart items with limited quantities. A low inventory warning can transform limited stock quantities into an advantage by creating a sense of scarcity, which can prompt quicker purchases and increase conversions.

> **Note:** The [Low inventory label can also be enabled for cart items](../../../cart-blocks/cart-items#low-inventory-warning) in the Flash Cart.

<figure><img src="https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2FJfGugUy0Un2WfefXj43r%2FATCBar_3.png?alt=media&#x26;token=574284e4-d4b9-43a1-ac38-58ec6ea47d09" alt=""><figcaption></figcaption></figure>

<details>

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

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

1. Head to the **App Embed** section of the theme editor.
2. Open dropdown for **Flash Quick Purchase Bar**.
3.  Check off **Enable low inventory warning** if you’d like the Low Inventory badge to appear in the bar.

    > Inventory tracking must be turned on in your Shopify Admin.
4.  Use the **Low inventory threshold** slider to select the number of products that will trigger the low inventory warning.

    > Choose between **5** and **50**.\
    > ![](https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2Fi50RCMWxukoSu6nsMKGq%2FATCBar_inventory.png?alt=media\&token=2bc70c13-a9c7-4dd6-abe5-e8f17620695b)
5. Click **Save**.

</details>

## Enable live traffic label

The **Live traffic label** shows how many other customers currently have the same item in their cart. This label can convey a sense of popularity and urgency, especially when paired with the low inventory warning.

> **Note:** The [Live traffic label](../../../cart-blocks/cart-items#live-traffic-label) can also be enabled for cart items in the Flash Cart.

![](https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2Fgit-blob-03fc06a3af428a70e9608c082dde550c82edb4df%2FATCBar_Docs_02.png?alt=media)

<details>

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

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

1. Open the **App Embed** section in the side panel.
2. Open dropdown for **Flash Quick Purchase Bar**.
3. Select the **Enable live traffic label** option.
4. Choose a different **Live traffic icon** from a selection of 50 free icons.
5. (_Optional_) Select **Animate low inventory and live traffic label** to make the icons pulse.
6. Click **Save**.

</details>

## Customize variant and quantity selectors layout

You can choose to merge the **add-to-cart button** and **quantity selector** into a single element or display them as separate elements. If you have more than one product option, you can also **combine variants** into a single variant selector.

![](https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2Fgit-blob-d107bc257e90f989651481612a4176463a17b0bd%2FATCBar_Docs_03.png?alt=media)

<details>

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

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

1. Head to the **App Embed** section of the theme editor.
2. Open dropdown for **Flash Quick Purchase Bar**.
3.  Check off **Combine add to cart button and quantity selector** if you’d like to combine the two elements.

    > When enabled, the buttons to increase or decrease the product quantity appear within the add-to-cart button. The total quantity will appear in the cart button label.\
    > ![](https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2FxUJiDAVOOLtHrNBtBgzz%2FATCBar_5.png?alt=media\&token=6648dab5-577d-47e0-ab72-c237f8a7f985)
4. Use the **Combine variant dropdowns** selector to choose when to combine variants: either **When there are 2 or more**, **3 or more**, or **Never**.
5. Click **Save**.

</details>

## Select bar layout for mobile view

Choose from three mobile **add-to-cart bar** styles: **Small bar, Medium bar,** or **Bar with variant selector.**

<table data-card-size="large" data-view="cards" data-full-width="true"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><p><strong>Small bar</strong></p><ul><li>Quantity selector</li><li>Add-to-cart button</li></ul></td><td></td><td></td><td><a href="https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2Fgit-blob-ec524d71027a6a587d3685e6b6fad9def91d3e6c%2FATCBar_Docs_05.png?alt=media">ATCBar_Docs_05.png</a></td></tr><tr><td><p><strong>Medium bar</strong></p><ul><li>Product thumbnail (unless hidden in <strong>Product information</strong>)</li><li>Product details</li><li>Quantity selector</li><li>Add-to-cart button (in the format determined in <strong>Form elements</strong>)</li></ul></td><td></td><td></td><td><a href="https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2Fgit-blob-31df82962e7c50dba4fc2dedac08a459d1fcc32e%2FATCBar_Docs_05.1.png?alt=media">ATCBar_Docs_05.1.png</a></td></tr><tr><td><p><strong>Bar with variant selector</strong></p><ul><li>Product details</li><li>Variant selector (in the format determined in <strong>Form elements</strong>)</li><li>Quantity selector</li><li>Add-to-cart button (in the format determined in <strong>Form elements</strong>)</li></ul></td><td></td><td></td><td><a href="https://1244958257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLfjaR8K6c2snMFV63drC%2Fuploads%2Fgit-blob-58e8a00adaf477b570eb1b42caed2f47dd37c503%2FATCBar_Docs_05.2.png?alt=media">ATCBar_Docs_05.2.png</a></td></tr></tbody></table>



***

> **Related links**\
> [Enable Quick purchase bar]()\
> [Add promotion banner](promotion-banner)
