Colour options fall back to underline links on translated locales

[hta218]

Description

On a localized storefront, colour options render as plain underline links instead of colour swatches when the locale is not English.

The swatch presentation is decided by matching the product option name against a hardcoded list of English names (Color, Colour, ...). Shopify returns the option name already translated for the active locale (e.g. Farbe in German, Couleur in French), so the exact English match fails and the option drops back to the default underline UI.

Suggested fix

Resolve the swatch presentation in a locale-aware way instead of matching exact English names — a case-insensitive matcher covering the storefront's supported languages, mirroring how the size option already handles translated option names.

Replace the direct OPTIONS_AS_SWATCH.includes(optionName) checks with a small helper, and centralize it so every surface (PDP option values, collection filters, product card) uses the same logic:

// Colour-option names across the storefront's supported languages. Shopify
// translates the option name per locale, so an English-only match drops the
// swatch control back to the plain underline links on non-English storefronts.
const OPTIONS_AS_SWATCH = [
  "Color",
  "Colors",
  "Colour",
  "Colours",
  // add the exact names the Storefront API returns for each enabled language, e.g.
  // "Farbe" (DE), "Couleur" (FR), ...
];

export function rendersOptionAsSwatch(optionName: string) {
  const normalized = optionName.trim().toLowerCase();
  return OPTIONS_AS_SWATCH.some((name) => name.toLowerCase() === normalized);
}

Notes:

• The exact translated strings can be confirmed by querying a product's options { name } under each locale via @inContext(language: ...).
• i18n is not enabled on main yet, so this only needs the English defaults today; the helper just makes it locale-safe when translations are turned on.