Screenshot of language selector on vandabaths.com

How to build an international ecommerce site with multilingual capabilities

Jonathan Wood from Enjoy Digital
Written by Jonathan Wood

Building an international ecommerce site can be tricky and you need to balance a lot of moving parts. Oh and you also need to make sure that it's editor friendly to use...

So how do you make sure it's a great experience for users and editors? Today, Jonathan Wood from Enjoy Digital will take you through how he did it on a recent client project using Umbraco.

Picture the scene. Your client is a global retailer with a big product catalogue, and they want to branch out into ecommerce. How can they manage multiple sites with different content and products, in several languages, at once?

They can do that with one centralised multilingual CMS in-which editors can manage content and products for multiple countries and languages. And guess what? This all can be achieved with the built-in features and packages in Umbraco!

 

How do you get started?

When you’re faced with multiple countries and languages, just knowing where to start presents its challenges. Here are some easy pointers to help you on your way.

A good structure is vital.

Start by splitting the individual countries into containers for each continent, breaking down a mammoth job into easily manageable chunks.

Screenshot of a tree structure in Umbraco

From there, your descendant sites can apply the individual language cultures based on the country you are trying to target.

How will users navigate this on the front-end? They initially see a root page working as a language selector and can choose their relevant country from there.

Screenshot of language selector on vandabaths.com

 

1-to-1 translations and language variants

Then you need to figure out how to present information in the right language. On an ecommerce site that uses multiple languages, 1-to-1 translations are a great way to help your client manage their content. Within one CMS they can easily create, edit and delete pages for a specific site, saving them time and keeping an organised structure.

Why not solely use language variants?

Language variants give you the tools to manage different languages, but as your site grows in complexity so do the problems you have to overcome. Treating each country like its own site will save you a headache in the long-term by giving your client complete control to change content as they want to and giving them scope to grow each site further in the future.

Don’t get me wrong though, don’t write off language variants completely.

Language variants are excellent for smaller multilingual sites. But in a large ecommerce structure like this, we are using it for Umbraco features such as dictionary translator to help manage non-CMS content within individual templates. Likewise, language variants are brilliant for helping us manage centralised repositories outside the bounds of an individual site. They also make it easier to create global content that can then be accessed across the different sites.

Another useful package is Translation Manager which is great for organising your translations; especially handy as your site grows and needs to support more languages.

 

Screenshot of 121 Translation in English

1-to-1 translations - English version

Screenshot of 121 Translation in French

And here it is in French

 

Implementing ecommerce functionality

So now you’ve set-up your multilingual site, how do you implement ecommerce functionality? Umbraco of old wouldn’t be our chosen ecommerce platform, but that’s all changed with Umbraco 8 and some amazing packages.

Vendr has the out-of-the-box functionality we need to set up our online store. Not only that, but it also provides a silky-smooth integration process when turning your multilingual site into a multilingual ecommerce site. It takes out the leg work of transforming multilingual site and has everything you need to set up individual stores for each country.

Screenshot of Vendr layout

 

What’s so great about that? Stores operate completely separately to each other, so you can personalise financial information and payment methods to suit each country, plus separate orders on a store-by-store basis making orders and performance easier to keep track of.

Vendr also has tonnes of cool and useful community packages with all the functionality you need to integrate major payment providers, and even a readymade checkout process that’s easily customisable with the help of a bit of code.

 

Content Management

So now that you have the structure for your multilingual site, you need to figure out how to manage all the content. A common problem we find is keeping content consistent across the site and preventing repetitive pages.

To make content easily manageable and interchangeable, use a mixture of content blocks and pods. There are plenty of community packages that help with this (like Perplex Content Blocks) but Umbraco 8 has a built-in block list editor with defined content blocks that mean you can easily build and manage pages.

Pods are global elements that can be inserted onto pages and managed from a centralised location. The benefit of this is that the client doesn’t need to recreate content across pages on the site but instead can access a global repository of readymade content. You might have a pod that promotes a group of products, a call-to-action pod, or a pod promoting a blog.

Content can also be massively enhanced when partnered with tools such as uMarketingSuite, which is a marketers’ dream. It helps you enrich your content to better target different audiences, which is key when you are building an international website.

uMarketingSuite has great out of the box features such as A/B testing and content personalisation based on user behaviour.

Screenshot of Translation Variants in English

Keeping a shared colour repository

Screenshot of Translation Variants in French

Readymade content ready to be translated

 

What were the outcomes of this approach?

We used this method with our client, luxury bath producer, V+A Baths.

V+A wanted a new multilingual website with a CMS which made content management easy and had the scope for growth. Their old website was limiting their growth and ability to integrated ecommerce functionality. The new website spans six different regions, 10 different countries and six different languages in total. Its simple structure and flexible CMS combined with a content block editor make it a breeze to use and manage.

1-to-1 translations allow the client to treat each site uniquely, tailoring the content to that audience while maintaining an organised and structured CMS. Language variants were particularly useful when it came to managing V+A’s extensive range of colours. We built a central colour repository which means the client can easily manage and quickly roll-out to 10 different countries and websites.

 

Final Thoughts

When building a multilingual site, thinking about structure and the best ways to centralise content to suit your needs should come before any development. Especially if you’re integrating ecommerce functionality.

Without structure and centralisation, you run the risk of the project and site becoming bloated and significantly harder to manage in the future. By taking these steps first, you’ll prevent redevelopment further down the road when the website grows and new functionality is integrated.

All this customisation can easily be achieved with what’s readily available within Umbraco, as well as through packages built by the community.

Loved by developers, used by thousands around the world!

One of the biggest benefits of using Umbraco is that we have the friendliest Open Source community on this planet. A community that's incredibly pro-active, extremely talented and helpful.

If you get an idea for something you would like to build in Umbraco, chances are that someone has already built it. And if you have a question, are looking for documentation or need friendly advice, go ahead and ask on the community forums.

Want to be updated on everything Umbraco?

Sign up for the Umbraco newsletter and get the latest news and special offers sent directly to your inbox