> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/metafields/badge.md).

# Custom Badge

A small corner note on collection tiles.

A short word printed in the corner of a product's tile in the collection grid — `new`, `restock`, `1 of 1`, whatever the drop calls for.

Outlined and grey rather than loud: it labels the tile without competing with the product.

## Setting up the metafield

1. Shopify admin → **Settings** → **Custom data** → **Products**
2. **Add definition**
3. Fill in:
   * **Name**: Badge
   * **Namespace and key**: `custom.badge`
   * **Type**: **Single line text**
4. Save

Then set it on any product you want marked. Products without it show no badge.

## Keep it short

It sits in the corner of a tile that's about half a phone screen wide. One or two words. Anything longer wraps and starts covering the product.

## This is not the filmstrip's 'new' tag

The [filmstrip](/supra-shopify-theme/supra/sections-and-features/filmstrip.md) marks slivers using the Shopify product **tag** `new`, which is a different system. Setting `custom.badge` to "new" won't mark a filmstrip sliver, and tagging a product `new` won't badge its collection tile. You may want both on the same product.

## Where it sits

Top right of the tile, flush with its edge so the badge's own rule and the grid's line meet rather than running as two lines a few pixels apart.

A product carrying both this and a [sale badge](/supra-shopify-theme/supra/theme-settings/layout.md) stacks them in that corner, this one first. They used to take opposite corners, which kept them apart but meant the eye had to look in two places for the same kind of thing.