The three badges
| Badge | When it shows |
|---|---|
| #1 in {type} | The best seller of its product type over 30 days, when the type has at least 3 products and it sold at least 3 units |
| Low stock | In stock, still selling, and less than 7 days of stock left at the current pace |
| Selling fast | Among your fastest sellers and at least 5 sold in 30 days |
A product shows at most two badges, and Low stock replaces Selling fast, so cards never get cluttered. Nothing is invented: if no product qualifies, no badge shows.
Turn them on
- 01Turn on the merchandiserBadges are worked out on every sort, so a collection needs autopilot on (Growth or Pro).
- 02Add the product page blockIn the theme editor, open a product template and add the StoreAi badges block where you want it, usually under the title.
- 03Turn on the card labelsIn App embeds, switch on StoreAi badges on cards. Labels appear on product images on collection and search pages, with no layout shift.
- 04Match your brandPick the colours in the block settings, or style the
.storeai-badgesand.storeai-card-badgeclasses yourself.
For developers
Badges are a JSON list in the storeai.badges product metafield, so you can print them anywhere in Liquid:
snippets/storeai-badges.liquid
{%- assign badges = product.metafields.storeai.badges.value -%}
{%- if badges and badges.size > 0 -%}
<ul class="product-badges">
{%- for badge in badges limit: 2 -%}
<li class="product-badge">{{ badge | escape }}</li>
{%- endfor -%}
</ul>
{%- endif -%}More snippets and the full metafield reference are on the developer page.
Questions
- Will badges slow down my store?
- No. Product page badges are plain Liquid. Card labels are a few hundred bytes of script that read data already on the page.
- Does it work with my theme?
- The product page block works in any Online Store 2.0 theme. Card labels find products by their link, which works in Dawn and most popular themes. If a theme is unusual, use the Liquid snippet instead.
- Can I rename the badges?
- The wording is fixed for now so it stays factual. You can restyle them freely, or print the metafield yourself and map the text in Liquid.