# Use Translation Strings for UI Labels

Never hardcode user-facing text. Use `{{ 'key' | t }}` with whitespace-stripped tags so the theme supports multiple languages.

```liquid
{% comment %} BAD: hardcoded text {% endcomment %}
<button>Add to cart</button>
<span>No results found</span>

{% comment %} GOOD: translation keys {% endcomment %}
<button>{{- 'products.product.add_to_cart' | t -}}</button>
<span>{{- 'search.no_results' | t -}}</span>
```

Keep translation keys descriptive and namespaced by feature (`products.product.*`, `cart.*`, `search.*`). Define defaults in `locales/en.default.json`.

## Key rules

- **Max 3 levels deep** — `products.product.add_to_cart` is fine, `products.product.button.label.text` is not.
- **`snake_case`** for key segments.
- **Sentence case** for values — `"Add to cart"`, not `"Add To Cart"`. Capitalize only the first word and proper nouns.
- **Interpolation** over concatenation: `"page": "Page {{ page }} of {{ pages }}"` → `{{ 'general.pagination.page' | t: page: paginate.current_page, pages: paginate.pages }}`.
- Escape interpolated user input unless it's meant to render HTML.

## Storefront vs schema strings

`locales/en.default.json` is **only** for storefront strings used via `{{ 'key' | t }}`. Labels inside `{% schema %}` tags (section names, setting labels, header content) live in a separate `locales/en.default.schema.json` file. See `liquid-schema-locales.md`.