Skip to main content

Google Translate

Add Google Translate to your store

Niall Diamond avatar
Written by Niall Diamond
Updated over 3 weeks ago
A screenshot of a red box

AI-generated content may be incorrect.

Add Scripting to the Footer Block

  1. Go to Appearance => Theme Options, scroll down to Footer block and add the following code (or similar):

<script type="text/javascript"> 

// Google Translate Function (SIMPLE layout)

function googleTranslateElementInit() {

new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,es,fr,de,nl',

layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');

}

</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">

// Google Tranlate API Reference

</script>

  1. This widget is coded with a simple inline style. The values in red above (en, es, fr, de, nl) represent the included languages when using the widget dropdown – these can be modified to suit your needs

  1. Save and Publish the Changes to the Footer Block

Add the Google Translate Element to the Header Layout

  1. Go to Appearance => Layouts => Header and add the following code to an HTML widget in the Header Layout:

<div id="google_translate_element"></div>

  1. Save and Publish the changes to the Header Layout

Did this answer your question?