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