Swatch colors are blank

Setting Up

Ensure that your swatch variants are correctly selected for the translated variant names. To effectively display swatch variants for translated product names, please follow the steps below:

1. Navigate to your Shopify admin, go to "Online Store > Themes", and click on "Customize".
2. In the theme editor, go to the "product settings" for swatches, then add "Couleur". (We are adding "Couleur" in this case because we are configuring for the French language)

Troubleshooting

If you notice that the colors are appearing blank on your translated page after setting up the swatches like the screenshot below, please follow these steps to troubleshoot the issue:

1. Open Google Chrome Developer Tools to inspect the swatch element. "Right-click" on the swatch and select "Inspect". In the images below, we are inspecting the first swatch bubble.

2. You’ll find both the "background-color" and "background-image" properties, which are used to display the colors in the swatch.

The issue occurs because the URL for the "background image" does not exist, resulting in a blank color display. Additionally, the "background-color" value "BleuNavy" is invalid, which also contributes to the blank appearance.

To resolve this issue, you need to ensure that the "background-color" has a valid color value or that the "background-image" URL points to an existing image.

• If your swatch is broken on the default language pages of your store, please reach out to your theme developer, as this is a theme-related issue.
• If the swatch works on your default language pages but is broken on the translated pages, please contact us at help@hextom.com and we’ll be happy to assist you further.