How to show the swatch color on multiple languages?

When your store sells in more than one language, you might notice that the color swatches on your EComposer product pages turn into plain buttons, or lose their colors, as soon as a customer switches to another language. That’s because EComposer recognizes a color option by its option name (for example, Color) and picks each swatch color by its value name (for example, Red). Once Shopify translates them into another language, those names no longer match.

The fix is simple: tell EComposer the translated names too. In this guide, we’ll use Vietnamese as the second language, so Color becomes Màu sắc and Red becomes Đỏ.

1. Translate the color option in Shopify

First, make sure the option name and its values are translated, and note down the exact translated words, because you’ll reuse them in the next two sections. We’re using Shopify’s Translate & Adapt app here, but any translation app works in a similar way.

Step 1: Open the Translate & Adapt app, choose the language you want to translate into from the dropdown at the top, then select the product that has the color option.

Step 2: Scroll down to Product options, type the translation for each color value and for the option name (here, Màu sắc for Color), then click Save.

Want to translate the text on your EComposer pages as well? Check out this guide.

2. Add the translated option name to the Variant Picker

Next, let EComposer know that the translated option name should also be shown as swatches.

Step 1: Open your product page in EComposer and click the Variant Picker element to select it.

Step 2: In the Content tab, make sure Picker type is set to Color picker. Then find Option show as swatch right below it and add the translated option name after a comma, for example Color, Màu sắc. You can list as many names as you need, so one setting covers every language. Once you’re done, press Ctrl + S to save the page, then click Publish when you’re ready to push it live.

3. Set colors for the translated values

Finally, give each translated color value its own swatch color in the Custom Color Swatches extension, so Đỏ shows the same red as Red.

Step 1: In the EComposer app, go to Optimize, type swatch in the search box, then click Settings on the Custom Color Swatches extension.

Step 2: Open the Setting tab, find the English color you want to reuse (for example, Red) and click its Duplicate icon. A copy with the same color appears right below it. If the color isn’t in the list yet, scroll to the bottom and click Add swatch color instead.

Step 3: In the copy, replace the Color name with the translated value exactly as it appears in your translation app (for example, Đỏ) and keep the same Color. Repeat this for every translated color value, then click Save.

That’s it! Switch your store to the other language and the swatches will show their colors just like in your default language.