Swatch Colors Are Blank on the Translation Page

This issue may occur after translation. Swatch codes are designed to detect specific keywords in your store’s default language. When these keywords are translated, the swatches may break, leading to issues such as:

• Displaying the wrong color.
• Not displaying at all.

Common Cases and Solutions

Case 1: Option Name

Many themes recognize swatch layouts based on a specific option name, such as "color." If this option name is translated, the theme may not recognize it, causing the swatch to break.

Solution

Keep the option name (for example, “color”) the same as the default text. This ensures the theme logic works correctly on the translated site.

• Afterward, you can use the Visual Editor or enable auto-coverage to translate the word "color" into other languages.

• The translation through Visual Editor or auto-coverage will not affect the theme’s logic.

  
  

How to Use the Visual Editor Tool to Translate the "Color" Option

1. In the app, access the Translation tool of the app.

   
   

   

   
   

2. Go to the Visual Editor page in the sidebar.

   
   

   

   
   

3. Select the language you want to translate.

   
   

2. Click All translation to create the translation through custom translations, then click Add translations.

   
   

3. Enter the base text "color" and its translation, then click Create.

How to Use the Auto Coverage Translation to Translate the "Color" Option

1. Navigate to the dashboard oof the app or Markets > Languages page. Click More actions on the target language and select the Enable Auto Coverage option.

   
   

   

   
   

Case 2: Color Mapping in Theme Code and Product Variant Options

Some themes use a color map to match colors with images or CSS styles. If only one of these elements (either the image/style or the variant text) is translated, the swatch may not display correctly.

Solution

Translate both the swatch configuration in the theme and the product variant options, ensuring the translations are consistent.

• Color Text <—> CSS: Translate the color text while keeping CSS color values consistent.

  
  

  

  
  

• Color Text <—> Color Image: Translate the color text while keeping the associated color image consistent.

  
  

  

  
  

• Product Variant: Ensure the translated product variant matches the translation of the color text in the swatch configuration.

  
  

  

You can translate these using AI Translation, Manual Translation, or Visual Editor. For instructions on using the Visual Editor, please click here.

If you have any questions or concerns about swatches or anything else, feel free to contact us at help@hextom.com.