HowTo – Multilingual sites and related (multilingual) graphical elements in Magento

One of the nicest Magento features are surely its multilingual capabilities. Store owner can easily download various language packs trough Magento Connect and have its store support multiple languages and locales. Although nice and cool, this feature can impose serious issues to web designers doing the actual design. Sometimes, more often than needed, designers use graphical elements (non-standard fonts) for navigation menu or search form or titles, etc.

So, where is the issue? -If a designer uses graphical elements on a multilingual store, than we need a mechanism that will “switch” given graphical element according to selected language.

Solution? -Luckily, solution is easier than it might sound. All you need to do is to create an “additional” skin inside /skin/frontend/default/ folder, give it some meaningful name and assign it to appropriate language (Store View).

Practical example? -Lets say we have a shop that supports English and French language. In that shop we have a special mini search form with graphical label assigned next to input field. In this case we need this label to be both in English and in French depending on the selected language.

Lets suppose our theme/skin is called “simply” and its located in /skin/frontend/default/simply/. What we need to do is to make special .css file in /skin/frontend/default/simply/css/multilingual.css which we will write only “language” specific css rules. For French language we can make a additional skin folder called /skin/frontend/default/simply_fr/ and place the same .css file in appropriate place /skin/frontend/default/simply_fr/css/multilingual.css plus we will make a folder for images as well, under the /skin/frontend/default/simply_fr/images/. With these in place we now have two skin folders/themes, with similar names simply and simply_fr. There are two things left to be done. First we need to add the call to our new multilingual.css file inside the /layout/page.xml file.

If you open the /layout/page.xml file of your theme under the /app/design/frontend/… you will find lines in xml file that are responsible for adding .css files to header. Below is an example.


In order to add our multilingual.css to header we can do something like:

<action method="addCss"><stylesheet>css/multilingual.css</stylesheet></action>

Note that above code does not specify the exact skin we will use. It does not say use “simply” or “simply_fr“. In order to assign the skin to a language we go to Magento admin under the System > Configuration section. There we choose appropriate language (Store View), English or French and assign it appropriate skin, simply for English and simply_fr for French.

You should now be able to write css that will either point to “English” or “French” related graphics. You can also use syntax like {{skin url=’images/image.jpg’}} whish will set image source to either /skin/frontend/default/simply/images/ or /skin/frontend/default/simply_fr/images/ depending on selected language.

Thats it.

Hope some of you find it useful.

You made it all the way down here so you must have enjoyed this post! You may also like:

Moving the Add to Cart validation error message on product page Danijel Vrgoc
, | 0

Moving the Add to Cart validation error message on product page

5 UX improvements for Magento checkout page design Marko Brisevac
, | 0

5 UX improvements for Magento checkout page design

Best practices for Magento cart page design Zoran Vorkapic
, | 0

Best practices for Magento cart page design

1 comment

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.