Customize bar style

Customize bar style

Customize Quick purchase bar

The Add-to-Cart 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, Live traffic label, and Promotion banner.

image

Choose sticky position

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

icon
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. Select the option you prefer.
    4. image
icon
"Sticky" means an element that stays in one place on the screen even when you scroll up and down.

Set custom colors

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

icon
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.
    5. To add a specific hex code color, click on the field to enter code (e.g. #FF0000)
    image
  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).

icon
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. Select a Thumbnail image aspect ratio to crop the image to be a uniform shape. Either the default Theme Setting, Square, Portrait, or Landscape.
    5. image
  5. 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.

Note: The Low inventory label can also be enabled for cart items in the Flash Cart.
image
icon
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.
    4. 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. Choose between 5 and 50.
    image
  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.

Note: The Live traffic label can also be enabled for cart items in the Flash Cart.
image
icon
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.

image
icon
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. 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.

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

image
icon
Small bar
  • Quantity selector
  • Add-to-cart button
image
icon
Medium bar
  • Product thumbnail (unless hidden in Product information)
  • Product details
  • Quantity selector
  • Add-to-cart button (in the format determined in Form elements)
image
icon
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)