Big Cartel Theme Support

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

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

Option 1: Single language

To translate your theme text to a specific language, refer to How do I edit the text built into my theme, like button text and messages?

Option 2: Multiple languages

To provide multiple language options to your customers, Google’s translator tool is currently the most ideal solution. This tool is available at Google Website Translator.

Remember, when adding code to your Aarcade theme, never edit your core theme files. Refer to Insert Content - Metadata and Scripts for the correct method for inserting code into your theme.

For example, the Google translator tools will provide you with two snippets of code.

Snippet 1

To be placed “before the closing </head>“:

<meta name="google-translate-customization" content="9d1171699cb96d7f-efab80ab7d6651ac-g4e3bd9612e4f79c7-30"></meta>

Using the methods detailed in the article Insert Content - Metadata and Scripts, we would create a page called x-ic-head-code, switch to HTML edit mode, paste this code into the content and save our changes.

Snippet 2

To be placed “where you’d like to display the Website Translator plugin on your page”:

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

Using the methods detailed in the article Insert Content - Metadata and Scripts, we would create a page called x-ic-open-body-code, switch to HTML edit mode, paste this code into the content and save our changes.

Styling

If you wish to style the translator drop down, you can apply your own custom styles — see How do I create custom style code?. For our example, we might add the following to our custom style coding area:

/* Position translator widget at bottom left
and round corners */
.goog-te-gadget-simple {
	position: fixed;
	bottom: 10px;
	left: 10px;
	padding: 4px;
	border-radius: 3px;
}

For an example of what this would look like on a product page, see this Google Translate Example.

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