Overview of Shopify + SiteTran Integration
This guide offers a straightforward, step-by-step approach to making your Shopify website multilingual in just a few minutes. Anyone can follow along successfully, no technical background needed.
Expanding your online business's reach to a global audience has never been easier for Shopify users thanks to SiteTran. Whether you're looking to attract new customers from different backgrounds or enhance the user experience for your current international clientele, this guide will walk you through the entire process.
Let's dive into the world of website translation and unlock new possibilities for your Shopify site, with SiteTran!
Prerequisites:
A Shopify website that you want to translate.
A SiteTran site that you will integrate with Shift4Shop. If you haven’t already, sign up for SiteTran and create a (free) SiteTran site.
Time needed:
Estimated time needed: 3 minutes.
Let’s get started.
Get your Widget Code
First, retrieve your widget code from SiteTran. If you haven’t already signed up for SiteTran, it only takes 30 seconds. After creating your account, create a site in SiteTran, and then proceed to get your widget code, which will generate the language dropdown on your Shopify site.
In SiteTran go to the "Widget" page.
To get your site’s SiteTran Widget Code, go to your site’s "Widget" page from the menu on top.
![Screen to find your SiteTran Widget Code](https://files.sitetran.com/blog-img/Screenshot 2023-11-29 at 4.10.49 AM.png)
Copy the Widget Code
Click the "Copy" button to copy your widget code (includes your styles). You will use this in a bit.
![Button to copy out your SiteTran Widget Code](https://files.sitetran.com/blog-img/Screenshot 2023-11-29 at 4.21.11 AM.png)
Integrating with Shopify
Login to your Shopify Site
In a new tab, log in to your Shopify website
Accessing the HTML Editor
- Click on "Online Store".
- Then click on "Themes".
![Getting to the code editor in Shopify](https://files.sitetran.com/blog-img/Screen Shot 2023-11-30 at 12.46.00 PM.png)
Find your theme and click on Actions -> "Edit code".
![Click on Actions -> Edit code](https://files.sitetran.com/blog-img/Screen Shot 2023-11-30 at 1.09.21 PM.png)
Open "theme.liquid"
Click on the "Layout" dropdown and click on "theme.liquid" to open the HTML editor.
![Click on theme.liquid](https://files.sitetran.com/blog-img/Screen Shot 2023-11-30 at 1.35.58 PM.png)
Paste the widget code
You will see your site’s HTML editor, which is where you add the SiteTran code.
Paste the SiteTran Widget Code that you copied earlier, right before the closing of the body element - before the </body>
![Paste your SiteTran widget code](https://files.sitetran.com/blog-img/Screen Shot 2023-11-30 at 1.41.09 PM.png)
Click "Save"
At the top right of the code editor, save your changes.
![Save your changes](https://files.sitetran.com/blog-img/Screen Shot 2023-11-30 at 1.44.30 PM.png)
Verifying & Translating
Testing the Integration.
Visit your Shopify site, and locate the SiteTran Widget. Choose your new language from the dropdown, and SiteTran will begin discovering your phrases.
![Verify that the SiteTran dropdown was added](https://files.sitetran.com/blog-img/Screen Shot 2023-11-30 at 1.46.51 PM.png)
Guide to Translating
Translating is easy. Read our quick guide on translating for newcomers.