# Labels & translations

All text displayed in the Variant Drawer can be customized and translated into every language your store supports.

***

## Editable labels

| Label                    | Default value                    | Where it appears                                          |
| ------------------------ | -------------------------------- | --------------------------------------------------------- |
| **Trigger button label** | *(varies by display mode)*       | The button/link that opens the drawer on the product page |
| **Drawer title**         | "Select variations and quantity" | Title text in the drawer header                           |
| **Add to cart label**    | "Add to cart"                    | Primary action button in the drawer footer                |
| **Start order label**    | "Start order"                    | Secondary action button in the drawer footer              |

***

## Editing labels for the primary locale

1. Open the Variant Drawer rule in the editor
2. Navigate to **Labels** in the left sidebar
3. Make sure the locale selector (top toolbar) shows your primary language
4. Edit any label text
5. Click **Save**

Labels for the primary locale are stored as root fields on the rule. These are the fallback values used when no translation exists for a given language.

***

## Translating labels for other locales

If your store has multiple published languages:

1. Open the Variant Drawer rule in the editor
2. Use the **locale selector** in the top toolbar to switch to the target language (e.g. `vi`, `fr`, `ja`)
3. Navigate to **Labels** in the left sidebar
4. An info banner confirms you are editing labels for the selected locale
5. Type the translated text for each label
6. Empty fields automatically fall back to the primary locale value — you only need to translate what you want to override
7. Click **Save**

### Restoring defaults

If you want to remove all custom translations for a specific locale and revert to the primary locale values:

1. Switch to the target locale in the toolbar
2. Navigate to **Labels**
3. Click **Restore defaults for \[locale]** at the bottom of the panel
4. Click **Save**

***

## How translations are stored

| Layer              | Storage                                                             | Purpose                          |
| ------------------ | ------------------------------------------------------------------- | -------------------------------- |
| **Primary locale** | Root fields on the rule (`drawerTitle`, `addToCartLabel`, etc.)     | Default/fallback values          |
| **Other locales**  | `translations` map on the rule (e.g. `translations.vi.drawerTitle`) | Per-locale overrides             |
| **Metafield**      | Synced to a Shopify metafield on every save                         | Read by Liquid on the storefront |

***

## How the storefront resolves labels

The label resolution follows this priority (highest to lowest):

1. **Locale-specific translation** — If the current storefront locale has a saved translation for a label, it is used
2. **Primary locale value** — If no translation exists for the current locale, the primary locale value is used
3. **Hardcoded default** — If neither exists, the built-in default value is used (e.g. "Select variations and quantity")

This resolution happens in Liquid at page render time using data from the metafield — no JavaScript fetch needed.

***

## Example

A store with English (primary) and Vietnamese:

| Label        | English (primary)                | Vietnamese (`vi`)      |
| ------------ | -------------------------------- | ---------------------- |
| Drawer title | "Select variations and quantity" | "Chọn mẫu và số lượng" |
| Add to cart  | "Add to cart"                    | "Thêm vào giỏ hàng"    |
| Start order  | "Start order"                    | "Bắt đầu đặt hàng"     |

A Vietnamese customer sees the Vietnamese labels. An English customer (or any unsupported language) sees the English labels.

***

## Requirements

* **Multiple locales** require the **Advance plan** (Storefront Translations feature)
* Languages must be published in Shopify Admin → **Settings → Languages** to appear in the locale selector


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://orbit-b2b.gitbook.io/orbit-b2b-docs/variant-drawer/labels-translations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.