Flair Dynamic Badge Text

3 min read
updated Aug 22, 2022

Overview

Flair product badge text can show dynamic information in based on product inventory, price, sale price and metafields.

You can include dynamic variables as part of the product badge text, such as Only {{ inventory_total }} left, to show the current product inventory available in real-time.

The following types of dynamic text are supported:

NOTE: Dynamic text is based on all product variants by default. If you’d like to show dynamic text for each variant, such as “Size Small”, check out Flair variant badges.

Discounted Price

You can show dynamically discounted prices for products in your shop in real-time. No more needing to communicate the “discount is applied in cart” to your customers.

You can display discounted prices based on:

  • {{ price_max_discount_amount_10 }} - $10 off the max price; amount can be any number between 1-999
  • {{ price_min_discount_amount_10 }} - $10 off the min price; amount can be any number between 1-999
  • {{ price_max_discount_percent_15 }} - 15% off the max price; percent can be any number between 1-99
  • {{ price_min_discount_percent_15 }} - 15% off the min price; percent can be any number between 1-99

Note: Discounted prices will display based on your shop’s currency formatting setting.

Example: $10 off

To show a $10 off discounted price:

Sale Price {{ price_max_discount_amount_10 }}

For a product with a max price of $19.99, this would show as:

Sale Price $ 9.99

Example: 15% off

To show a 15% off discounted price:

Sale Price {{ price_max_discount_percent_15 }}

For a product with a max price of $40, this would show as:

Sale Price $ 34.00

Inventory

Use the following to display dynamic inventory totals:

  • {{ inventory_total }} - displays the remaining inventory available

Example

To show the remaining inventory:

Only {{ inventory_total }} left!

This displays as:

Only 3 left!

Metafield

Show shop and product metafield values:

  • {{ metafield.shop.namespace.key }} - display the value of the shop metafield stored at namespace.key
  • {{ metafield.product.namespace.key }} - display the value of the product metafield stored at namespace.key

Example

To show the product metafield stored at namespace custom and key ships_by:

Ships {{ metafield.product.custom.ships_by }}

This displays as:

Ships in 5-7 days

NOTE: Metafield values are displayed using the Shopify metafield_text liquid filter.

Price

Use the following to display dynamic prices:

  • {{ price_min }} - the lowest price of the product across all variants
  • {{ price_max }} - the highest price of the product across all variants

Example

To show the minimum price:

Starting at {{ price_min }}

This displays as:

Starting at $19.99

Sale Amount

If you use the compare at price to display sales prices, you can display the savings amount using these:

  • {{ sale_amount_min }} - the minimum savings in dollars
  • {{ sale_amount_max }} - the maximum savings in dollars

The sale amount is based on the difference between the product price and compare at price.

Example

This displays the maximum savings amount:

SAVE {{ sale_amount_max }}

For a product with a price of $10 and a compare at price of $30, this would show as:

SAVE $20.00

Sale Percent

If you use the compare at price to display sales prices, you can display the savings percent using these:

  • {{ sale_percent_min }} - the minimum savings as a percentage
  • {{ sale_percent_max }} - the maximum savings as a percentage

The sale percent is based on the difference between the product price and compare at price.

Example

This displays the maximum savings percent:

SAVE {{ sale_percent_max }}%

For a product with a price of $20 and a compare at price of $40, this would show as:

SAVE 50%

Note: Percents are rounded to the nearest whole number, so 25.4 becomes 25.

Have a suggestion?

If you’d like to see support for any dynamic variables that aren’t listed here, let us know.