Fluorescent
Flash Cart
Flash Cart
  • Flash Cart Help Center
    • Get Started
    • FAQ
    • Support
  • Cart components
    • Quick cart
      • Cart density
      • Cart summary area
      • Cart title
      • Empty cart promotion
      • Sidebar style
    • Added-to-cart popup
    • Floating cart icon
    • Quick purchase bar
      • Customize quick purchase bar
      • Promotion banner
  • Cart Blocks
    • Using cart blocks
    • Cart items
      • Item images
      • Item savings
      • Live traffic label
      • Low inventory warning
      • Unit prices
    • Cross-sells
      • Global cross-sells
      • Handpicked cross-sells
      • Automatic recommendations
      • Cross-sells: Tips and tactics
      • Analytics
    • Free shipping bar
    • Payment icons
    • Text bar
    • Text list with icons
    • App embeds
    • Custom Liquid
  • Style settings
    • Colors
    • Fonts
    • Custom CSS
  • For Developers
    • API custom events
    • Configuration options
Powered by GitBook
On this page
  • Choose sticky position
  • Set custom colors
  • Edit product thumbnails
  • Enable low inventory warning
  • Enable live traffic label
  • Customize variant and quantity selectors layout
  • Select bar layout for mobile view
  1. Cart components
  2. Quick purchase bar

Customize quick purchase bar

PreviousQuick purchase barNextPromotion banner

Last updated 1 year ago

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 , , and .

Choose sticky position

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

"Sticky" means an element that stays in one place on the screen even when you scroll up and down.

STEPS

In your theme editor (Customize):

  1. Head to the App Embed section of the theme editor.

  2. Open dropdown for Flash Quick Purchase Bar.

Set custom colors

STEPS

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)

  5. Click Save.

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

STEPS

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. Click Save.

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.

STEPS

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.

  5. Click Save.

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.

STEPS

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.

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.

STEPS

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.

  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.

Select bar layout for mobile view

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


Select the option you prefer.

The Quick Purchase Bar colors will respect those . However, you can choose to customize those separately using the color swatches.

Select a Thumbnail image aspect ratio to crop the image to be a uniform shape. Either the default Theme Setting, Square, Portrait, or Landscape.

Note: The in the Flash Cart.

Choose between 5 and 50.

Note: The can also be enabled for cart items in the Flash Cart.

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.

Related links

set within the Flash Cart app - custom or default
Enable Quick purchase bar
Add promotion banner
Promotion banner
Low inventory warning
Live traffic label
Low inventory label can also be enabled for cart items
Live traffic label
Cover

Small bar

  • Quantity selector

  • Add-to-cart button

Cover

Medium bar

  • Product thumbnail (unless hidden in Product information)

  • Product details

  • Quantity selector

  • Add-to-cart button (in the format determined in Form elements)

Cover

Bar with variant selector

  • Product details

  • Variant selector (in the format determined in Form elements)

  • Quantity selector

  • Add-to-cart button (in the format determined in Form elements)