Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I translate my Big Cartel theme to another language?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

Option 1: Manual Translation

Manual translation is perhaps the most robust option, but requires the most work. Translation services are available online and Aarfie’s Big Cartel themes have been successfully translated using such services.

Aarfie does not offer translation services or keep a record of available 3rd party translation services.

Option 2: Google Translator

The easiest method for translating your Big Cartel theme is to use Google’s web site translator tool.

1. Use the settings provided in the section Add Translate to your website section of the translator tool page to customise your tool.

2. Copy the code provided and paste it into a simple text editor where you can alter it. For example:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

3. Add the following inline style to the google_translate_element div:

<div id="google_translate_element" style="position: absolute; top: 20px; right: 20px;" z-index: 10;></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

4. Navigate to the Design > Pages section of your Big Cartel shop admin and click the page titleĀ Layout.

Layout Page

Accessing the Layout page code

5. On the following page, scroll through the text box content until you find the following line of code. If necessary, use your web browser’s find text function, typically located in your Edit > Find browser menu, and search for “top_of_page“.

<a id="top_of_page" name="top_of_page">&nbsp;</a>
<div id="header">

6. Create a new line just BEFORE the header element. Then copy and paste your altered Google Translator code in-between the top_of_page and header element:

<a id="top_of_page" name="top_of_page">&nbsp;</a>

<div id="google_translate_element" style="position: absolute; top: 20px; right: 20px; z-index: 10;"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<div id="header">

7. Click the Save button to save your changes and then review the position of your translator tool in your shop front. If you do not see the translator tool, you may need to add the line autoDisplay: false, to your translator code as follows:

<a id="top_of_page" name="top_of_page">&nbsp;</a>

<div id="google_translate_element" style="position: absolute; top: 20px; right: 20px; z-index: 10;"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<div id="header">

Note that you can remove this option after you have finished positioning your translator tool.

7. If re-positioning of the translator tool is needed, return to your Layout page (per step 4) and locate your Google Translator code. Then edit the inline style values top and right to suit. These values correspond with the offset of your translator tool from the top and right of your shop page. For example:

<a id="top_of_page" name="top_of_page">&nbsp;</a>

<div id="google_translate_element" style="position: absolute; top: 40px; right: 10px; z-index: 10;"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<div id="header">

8. Click the Save button to save your changes and then review the position of your translator tool in your shop front. Repeat steps 7 and 8 as necessary.

9. If you added the line autoDisplay: false, to your translator code for the positioning process, you can now remove it and save your changes.

Last Modified: 3rd May, 2010

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.