storefront-configurable-swatches-color-size

Swatch Localization

If you use a language other than English for attribute values, it is recommended that you
upload swatch images to each configurable product record, rather than upload the images to
Media Storage. Swatch image file names that are uploaded to Media Storage are also used as
CSS classes, and can only include the characters a-z, A-Z, and 0-9. Characters from non-Latin
alphabets, such as Arabic, Chinese, Cyrillic, and Japanese are not recognized by the system.

English as Primary Language

By default, the same swatch image can be used for all languages. The easiest way to localize a
swatch is to simply translate the attribute label that appears in the store. However, if the
translated labels include accented characters, see the next section.
The system uses a simple fallback strategy to locate a suitable swatch. The system looks first
for a swatch image that is based on the current language. If no image is found, the system
looks next for an attribute label that is associated with the configurable product option.
Using Manage Attribute / Labels, you can enter a translated label for each language supported.
For example, the label for the color value “Red” would be entered as “Rot” for German. The
following table shows the relationship between the attribute label, the product image label, and
the image file name:

Label Translation

Other Primary Languages

If possible, we recommend that you upload swatch images from the Magento Admin, which
allows you to use any character in the image file name. However, if either of the following is
true, you must upload swatches directly to the server:

  • If you use a language other than English and the translated labels have Latin characters
    with diacritics (that is, accented characters)
  • Your localized images have names that do not transliterate from UTF-8 to ASCII using PHP.

Swatch images are located on the server in the following directory:
media/wysiwyg/swatches/. If you choose to upload images directly to the server, you must
understand how attribute labels are converted to image names.
1. The label is transliterated from UTF-8 to ASCII.
a. If the label contains Latin characters with diacritics, many of the characters are
transliterated to ASCII. For example, Ô is converted to ^O.
b. If the label cannot be transliterated into ASCII, no swatch images can be uploaded from
media/wysiwyg/swatches/. Languages with characters that cannot be transliterated
include Cyrillic, Chinese, Japanese, and Arabic.
c. If the language contains characters that cannot be transliterated to ASCII, do one of the
following:

  • Upload all swatch images to each configurable product
  • In the Admin, change the attribute values to English as the primary language, and set
    up the swatch files in English.

2. The label is converted to lowercase.
3. Any characters other than 0-9 and a-z are replaced with the dash character (-).

Leave a Comment

Your email address will not be published. Required fields are marked *