Using Language Translation in Store Styles

While much of the FastSpring store is automatically translated for customers in different countries, you can also customize the translation of the static parts of your store, such as a navigation menu, header, footer, logo, or images.

Setup

To accomplish these translations, you can define classes in your CSS file, then assign these classes to the appropriate items in your xhtml file. Using information from our Geo-location service, which detects a customer's IP location, the CSS class lang-?? is automatically set on the html body tag, where ?? is the two letter language ISO 639-1 code.

In the following example, English is the default language, and translation is desired for German and Spanish.

First, you create some CSS classes than can be assigned to elements on your xhtml page.

/* hide all non-English by default */
.store-page-english{ display: inline; }
.store-page-german { display: none; }
.store-page-spanish { display: none; }

Second, you can use the CSS classes we automatically set on the html body tag to hide or show our classes when appropriate.

/* show other language when body tag for language is set */
.lang-de .store-page-german{ display: inline; }
.lang-es .store-page-spanish{ display: inline; }

/* hide English when another language is active */
.lang-de .store-page-english { display: none; }
.lang-es .store-page-english { display: none; }

Third, in the xhtml file you can then use the CSS classes that you created and assign them to blocks of html code for your different translations.

<div class="store-page-english">Free</div>
<div class="store-page-german">Frei</div>
<div class="store-page-spanish">Gratis</div>

Results in FastSpring Classic Documentation:

Important!

Using Language Translation in Store Styles

Setup

We're Here to Help