In the previous article, we went over how to create new Magento store views and work with them. Today I am going to show you how to take this ability a step further by allowing you to create a multi-language website that will translate automatically as well as allow you to create custom content, and navigation menus, which will load exclusively for specific language store views. The first step in this process is setting up the proper store views and the second step, which we will detail later in this article, is setting up the content and navigations.
Setting Up Multi-Language Store Views
The first thing you want to do, when it comes to creating a simple translation of your website is to visit:
Here you will see a list of ‘packages’ which store information for each unique language that Magento supports. These packages allow you to display a unique ‘store view’ in that specific language, when the user chooses that specific store view. Take a look at this example:
By choosing the Spanish Language ‘store view’ the website’s text will translate to that specific language. For instance, you will see this:
Instead of this (Default English Store View)
The secret to getting this to work is to remember that one language pack, which I will show you how to install, always has a relationship with a unique store view that you create. The purpose of this article is to show you how to create this relationship.
Setting Up Your Spanish Language Pack
Make sure, when you are on the Magento Language Pack page that you choose the appropriate language for your situation. In this demonstration I will be using the Spain Spanish Pack:
You will then see this page:
Download that package (.gzip file) and make sure to unpack the file so you can access what will be a folder titled ‘app’. Open up that folder through your ftp program and you will see 2 folders ‘design’ and ‘locale’. At this point, ftp into your magento store’s url, look for the ‘app’ folder and open it up. Then all you do is ftp the /design and /locale folder on your computer to the /app folder on your website. It will look something like this:
You could upload the ‘design’ folder and the ‘locale’ folder and it will *not* overwrite any key data at all. Your data is safe, all it will do is add unique files relating to the new Spanish Language Store View that you will be creating. When you are done, it is time to make the store view and assign this language pack to it.
Setting Up The Store View
As you may recall in the previous article, to create a store view all you have to do is go to the Magento Admin and, at the top menu, look for “System –> Configuration” and you will then see, to your left, at the very top, a menu that allows you to view store views as well as manage stores. That section will look like this:
Click on the ‘Mange Stores’ option and then add a new store view titled “Spanish Store”. Use the information in the previous article to accomplish this task. If you are not sure how to do that, I strongly suggest you re-read it to become familiar with building store views. This is what you will see when you have added it:
And Navigations For Your Website
Now that you know how to create multiple store views, including multi-language store views, the question is how do we add content that is viewable only for certain store views? For instance, what if you want to provide a CMS page for the English speaking visitors as well as a custom written Spanish translation of that CMS page for those who use your Spanish Language store view?
Tell Magento What It Needs To Do For Each Store View
Let’s pretend that you are running an English and Spanish website. While the recent demonstration of having an English and Spanish store view shows you how to translate the basic modules of your Magento Shopping cart, you may want to translate your own content which you write by hand such as CMS Pages (About Us/Contact Us/Etc). The secret to doing this, when it comes to custom content, is creating a unique CMS page for each store view and, when it comes to navigation, creating a unique category for each store view.
Please note, for the sake of demonstration, I want to keep us away from editing themes (.phtml/php files) and perform all of these tasks using Magento’s Admin system. So I will be showing you how to use categories to create navigation menus and, at the end, will provide a hint as to how to take it a step further and customize styles and hand coded navigation items that are exclusive to each store view. For now, let’s focus on keeping it simple. First, we must create content for each store view so let’s create a simple CMS Page for the English store view and then the Spanish Store View.
Your First Spanish Language CMS Page
You know how to create a CMS page for the default store view, all you have to do is look at the top navigation and move your mouse to CMS –> Pages and then create a new page. To add a CMS page that loads exclusively in one specific store view (Spanish) is no different except for one key moment – when you specify the store view to use for this page. Look at the screenshot below and you will see what I mean:
For a better view, here is what it will look like when you have created the CMS page and are editing it:
By assigning “Spanish Store” in the store view option, Magento will know to load this CMS page content only when in the proper store view. So when a visitor hits ‘store view’, so long as you link to that page, it will load just fine. You would know the url because you would affix the value in the ‘url-key’ field, as shown above, to the full url of your website, and that page would load.
If you want proof that it loads only in one store view, paste the url to this CMS page and you will see, when in default store view mode, a 404 error.
Change the store view to ‘Spanish’ (or whatever you titled it as) and you will see the content load. Now, this is just a simple explanation of how to load a CMS page in a unique store view. You will probably want to be able to create custom navigation menus to link to these pages. Because a full explanation of how to edit multiple themes for each store view is beyond the scope of this article, I will state a few things for your reference.
First, if you wish to use, for any reason, separate themes for store views, you can do this. In System–>Configuration–>General and under the Design tab, you will notice you can edit the theme for the default store view. So all you have to do is stay there but select the unique store view you wish to visit and then make the proper changes. Consider this example:
In this example, one has chosen the Spanish store view and they want to tell Magento to load a custom theme for their spanish speaking visitors. You may notice that the values are grayed out. This is because, by default, other store views inherit the value of the main store view (Default) and the only way you can make a change to affect this is to manually uncheck the checkbox to the right of “Skin, Layout And Default” areas and manually enter the name of the theme. If you purchase a theme called “business” then you would uncheck the checkmarks next to Skin, Layout and Default and replace the word “default” with ‘business’ and then save the changes.
This would allow your Spanish store view to load an entirely new layout design compared to the main store view. With that said, doing this is beyond the scope of the article so we will learn to create a unique (and dynamic) navigation, for your custom store view, that only links to the custom store view content (Spanish Language Content). First, let’s set up a category that will load exclusively in the Spanish store view.
Create Your Category
Let’s say you are going to create a category for the Spanish store view titled “Spanish Language Menu Item”. You simply go to Catalog–>Manage Categories and click on the root category “Default”. You then add a sub category to it like you would any other time you wish to create a category.
After creating the category, take the time to change the store view you are in. You will notice, to your left, an option that is titled ““. Go ahead and choose the Spanish store view and then click on “Spanish Language Menu Item” category. When you scroll down on the page where you are editing the category, you will notice if it asks you, at the very bottom of that form, if you would like to include it in the navigation menu. Make sure you choose ‘yes’. To do this, you will have to uncheck the checkbox to the far right so you can edit this value. Save this value and return to the default store view.
You will see the edit category page, just as you did before, but this time you have one more modification to this category to make. Now that you are in default view, since you want to load this category only on Spanish store view, go to the bottom of the page and choose ‘no’ when it asks if you wish to add it to the navigation menu. Save the category and, as of now, your category is only meant to load during the selection of Spanish Store View. Of course, you must make sure this category is enabled and we have yet to add content to it. This is where the fun part starts.
In another browser tab, go to CMS –> Blocks. Create a content block, just as you did with a CMS page, that is exclusively for Spanish store view. Make sure, for store view, you only select “Spanish” store view. It should look like this if you are editing the CMS block:
Now that you have created this custom CMS block for Spanish store view only, you must associate it with the Spanish store view’s exclusive category titled “Spanish Language Menu Item” which you created just a few moments ago. In your other tab, where you have the edit category page open for “Spanish Language Menu Item” category, select the tab titled “Display Settings” and assign the CMS block to the category. Use this as reference to make sure you do this properly:
Important Note: Select ‘Spanish’ store view when doing this. Because by doing this, you are telling Magento “We are putting this exclusive category in a position to read the custom CMS block, but only when it is in store view”. By assigning the cms block to the category in Spanish Store View, and by assigning the category to a navigation, while in Spanish store view, properly allows Magento to recognize “Do these 2 things in Spanish Store View – show the category in the navigation menu and make sure, when the category is clicked on, the cms block it is associated with loads properly”.
By following these steps, you will have unique navigation menus for each store view. Here is what my ‘default’ store view navigation looks like:
My Custom Spanish Store View – Loading An Exclusive Category:
This is what I see when I click on the “Spanish Language Menu Item” page:
That is how you create custom content with unique store views. Whether you want to separate store views by product type, language or any other method you now have the power to change store views, determine their content and how people can navigate freely between each view. Please feel free to ask any questions and, should you need a multi-language store set up professionally, contact us and let us know how we can help.
Magento Development Lead
