Translating Snipcart's Shopping Cart in 4 Simple Steps

By now you must have heard us brag about how Snipcart allows merchants to sell all over the world. Whether you want to sell to an international audience, or exclusively to a region-specific customer base, we've got your back. If it's the latter, however, chances are you might need your shopping cart's language to adapt to the region in question.

Being based out of Québec City, we're pretty fluent in English and French. But to be honest, we kind of suck at, say, Portuguese. And we certainly didn't want to provide our international users with sketchy Google translations for their online businesses. So we decided to put our language resources on a public GitHub repository. Doing so enables native speakers to add their own contributions to Snipcart's international reach.

By default, we provide an English version of our cart. Making sure the cart's copy, buttons, steps and indications are all in, say, Portuguese (you guessed it, this is our chosen example), is a matter of four simple steps.

In this post, I'm going to show you in details how to go through the whole translation process.

Important notice: Since we are using GitHub, you will need to have a valid account with them. You can sign up here.

Step 1 - Fork snipcart-localization

First of all, you need to fork our localization files on GitHub. To do so, go to our snipcart localization repository and click on Fork. As you can see, I'm currently in the snipcart/snipcart-localization repository:

Forking snipcart localization repository

Now that I've forked the repository, I have it on my account and I can make the modifications I want. The difference here is that I'm now on ftremblay/snipcart-localization (my personal account):

Snipcart localization repository after forking

The only thing we need to do before translating is to pull the repository on our computer with Git. Here's the command I wrote on my terminal to do that:

git clone git@github.com:ftremblay/snipcart-localization.git

Step 2 - Translation

Now it's time to translate Snipcart in Portuguese. Start by adding a new file in the locales folder called pt.js. pt here is the abbreviation for Portuguese. It could be the abbreviation of any language you want Snipcart to be translated into.

Now copy paste the en.js content into your new file. It will be easier to keep track of where you are in the translation process by doing this. Make sure to change the registerLocale parameter to the correct abbreviation of the language. In this case, pt for Portuguese.

portuguese localization file

When you are finished editing your localization file, you can push your modification with Git:

git add .
git commit -m "Added Portuguese localization file"
git push origin master

You can verify that you pushed correctly to your repository in GitHub. As you can see below, I successfully committed to ftremblay/snipcart-localization:

ftremblay/snipcart-localization commit

Step 3: Pull request

Now that you're done with the translation, it's time to request a pull from Snipcart. This will allow us to integrate your changes directly into our repository. You can easily create a pull request in GitHub by clicking on the Pull requests link at the right side of the dashboard.

Pull request link

Then click on New pull request:

Click on new pull request

Add a comment explaining what you did and, finally, click on Create Pull Request:

Create pull request section

Now we advise you to wait a few days: this will let us the time to review your request and make sure you didn't add a file filled with Arnold Schwarzenegger quotes.

snipcart-translation-arnold

If you need to use your translated cart ASAP, you can also serve the .js file from your server, as we explain in our localization documentation.

Step 4: Change Snipcart's language

Once your commit is accepted, you will be able to use your chosen language on your website's cart like many others already.

You can do it by simply changing the lang attribute of your HTML tag with the appropriate language abbreviation:

<html lang="pt">

Conclusion

Well, looks like we're done here, folks! Translating all of Snipcart's written resources might take you a few minutes, but they're well worth it. Especially if your customers expect to shop online in a specific language.

Oh, and FYI, here are the existing cart translations in our GitHub repo:


Got any questions about translating our cart using our locales on GitHub? Feel free to hit the comments or drop us a line at geeks@snipcart.com. We'll be glad to help!

Suggested posts: