Build global e-commerce stores with Weglot and Webflow

Webflow Localize can't translate Ecommerce products. See how to add Weglot to a Webflow store for multilingual products, checkout, and SEO-ready URLs.

Build global e-commerce stores with Weglot and Webflow

Ismail Ajagbe
Technical Author
View author profile
Ismail Ajagbe
Technical Author
View author profile
Table of contents

Get started for free

Create custom, scalable websites — without writing code. Start building in Webflow.

Get started for free

Create custom, scalable websites — without writing code. Start building in Webflow.

Webflow's native Localize can translate almost everything on your site, except your store's products. Here is how Weglot fills that gap and takes a Webflow store multilingual.

Selling into new countries usually starts with a translation plan, and on Webflow that plan runs into a wall the moment products enter the picture. Native localization handles static pages, CMS items, metadata, and images, but a Webflow Ecommerce store is a different story.

Webflow's own documentation is direct about it: Localize does not support Ecommerce Site plan features, so products, categories, and pages cannot be localized when both Localize and Ecommerce are enabled. That is the whole reason a multilingual Webflow store needs a layer that native localization does not provide.

Weglot fills that gap with a translation layer that reads whatever renders on the page, product and checkout text included. This guide covers when to reach for it, how to wire it into a Webflow store, and where the SEO details hide. Weglot's dashboard labels shift over time, so treat the screens here as a map and confirm exact steps in Weglot's docs.

Why Webflow Localize can't localize an Ecommerce store

Webflow Localize is a strong native localization system, but it draws a hard line at Ecommerce. Knowing exactly where that line sits tells you which parts of a global store still need a third-party layer and which parts Webflow already handles for you.

Webflow's own Localize feature is broad.

Here is the ground it already covers on a normal site:

  • Localized URLs: each locale gets its own subdirectory and locale-specific slugs.
  • Localized metadata: page titles and meta descriptions translate per locale.
  • Localized sitemap: search engines see every locale collected in one sitemap.
  • Static pages and CMS items: on-canvas text and Collection content translate per locale.
  • Images and alt text: you can swap visuals and rewrite alt copy for each market.

For a content or marketing site, that list is usually enough on its own. The exception is the store: products, categories, and Ecommerce pages sit outside what Localize can translate, so a Webflow store reaching new markets has to look elsewhere for those.

Weglot slots into that gap as a JavaScript layer, and its place in a Webflow build looks like this:

Weglot-Webflow integration architecture diagram: a Webflow site loads the Weglot JS library, which runs translation detection and feeds CMS content, e-commerce elements, and dynamic forms into translated output served at localized URLs.

Because that library works on rendered output rather than the CMS data model, it reaches the product descriptions, cart, and checkout text that Localize leaves in the source language. That single difference is what makes it a fit for a store rather than only a blog.

What do you need to translate a Webflow store with Weglot

Two accounts and one domain decision cover everything this build needs. None of it touches your store's data model or asks you to export content, because Weglot reads the published site the way a visitor's browser does.

Line these up before you start:

  • A paid Webflow Site plan: custom code injection is switched off on the free Starter plan, and the Weglot snippet needs it.
  • A Weglot account: the free tier translates a small site into one language, while larger catalogs move to a paid plan.
  • A custom domain: language-specific URLs and their SEO value only work on a real domain, not a .webflow.io staging address.
  • Your target languages: decide the markets you are translating into, since word count and pricing both scale with that list.

With the accounts and domain settled, the rest is a copy-and-paste job split across two places: your Webflow site settings and the Weglot dashboard.

5 steps to add Weglot translation to a Webflow store

The build moves from the Weglot side to the Webflow side and back. You create a project, drop one script into Webflow, decide how translated URLs look, then place the language switcher where visitors expect to find it. Follow the order below so the SEO choices do not bite you later.

1. Create a Weglot project for your site

Start in the Weglot dashboard and create a new project, choosing Webflow as the website technology so Weglot applies the right content-detection rules. It asks for the site you are translating: enter your custom domain rather than a .webflow.io staging address, because the staging domain will not carry translations through to production. If a custom domain is not live yet, pick the connect-my-live-website option and run the JavaScript-only mode while you test. The project is where every translation, glossary rule, and word-count reading lives from here on, so treat it as the source of truth for the multilingual side of the store.

2. Set your source and target languages

Inside the project, set the original language to match the locale you built the Webflow store in, then add each language you want to sell in. Weglot measures word count against this list, so adding a language later raises the translated-word total your plan is billed on. A machine-translation first pass runs automatically the moment the languages are set, which gives you something to review instead of a blank slate. You can refine any string by hand, lock brand names and product terms with a glossary, and exclude content you never want touched, all from the dashboard. Confirm the language list is right before publishing, since it drives both the switcher and the URLs you set up next.

3. Add the Weglot snippet to your Webflow site

Weglot ships as two script tags: one loads the library, the other initializes it with your project's API key. In your Webflow dashboard, open the site's settings and find the Custom Code tab.

Add both tags to the Head Code field, swapping in your own key:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
Weglot.initialize({
  api_key: 'YOUR_API_KEY'
});
</script>

Replace YOUR_API_KEY with the key shown in your Weglot dashboard, then save the changes and publish the site. The snippet runs only on the published site and not inside the Designer canvas, so translations and the default switcher appear once the site is live. If nothing changes after publishing, an incorrect or missing key is the first thing to check.

4. Choose a URL structure so search engines index each language

How translated pages are addressed decides whether search engines treat each language as its own indexable page. Weglot offers three structures on a Webflow site, and the choice comes down to whether you have a custom domain and how you want SEO signals to consolidate.

These are the three options and where each one fits:

Data table
URL structure Example address Search indexing Best fit
JavaScript only yoursite.com, unchanged No separate indexing Testing, or a site with no custom domain
Subdomain fr.yoursite.com Each language indexed A fast start on a custom domain
Subdirectory yoursite.com/fr/ Each language indexed Keeping SEO signals under one domain

Subdomain and subdirectory both produce indexable, language-specific URLs, while the JavaScript-only mode does not, so keep that one for testing. On the indexable options Weglot injects hreflang tags, the signal Google uses to connect a page to its other language versions. Those tags have to be bidirectional, since Google ignores hreflang unless each language version points back to the others, which Weglot handles for the pages it generates.

5. Place the language switcher in your Webflow layout

By default Weglot drops a language switcher in the bottom-right corner of the live site, which is rarely where you want it. To move it into your navbar or footer, add an HTML Embed element in Webflow at the exact spot and give Weglot a target to render into.

Paste this empty div into the Embed element:

<div id="weglot_here"></div>

Weglot detects that div on the published site and renders the switcher inside it instead of the default corner. If you would rather drive language changes from existing menu links, Weglot also reads links written in the #Weglot- format, where #Weglot-fr switches to French and the capital W is required. Either way the switcher appears only once the site is published, so check it on the live URL rather than in the canvas.

What causes Weglot translations to fail on a Webflow site? Tips to troubleshoot

Most Weglot problems on Webflow trace back to three things: where the script runs, whether the site has a real domain, and how many words the plan allows. Each one surfaces as a distinct symptom, so the symptom usually points straight at the cause.

The language switcher never appears

Cause: the Weglot script runs only on the published site, so nothing shows while you preview inside the Webflow Designer, and a switcher placed in an HTML Embed will not render on the canvas either.

Fix: publish the site and open the live URL. If the default switcher still does not load, recheck that both script tags sit in the site-wide Head Code and that the API key matches the one in your Weglot dashboard exactly.

Products and checkout text stay in the source language

Cause: this is the native Localize limitation rather than a Weglot bug. If Webflow Localize is enabled alongside the store, it leaves products, categories, and Ecommerce pages untranslated.

Fix: let Weglot own the store's translation. Confirm the product and cart text is present in the page output that Weglot scans, then add any missed strings by hand from the Weglot dashboard.

Search engines only index the original language

Cause: the site is running Weglot's JavaScript-only mode, which creates no separate URLs, so there is nothing language-specific for a crawler to index.

Fix: move to a subdomain or subdirectory structure on your custom domain. Both generate indexable URLs and let Weglot emit the hreflang tags search engines read, which the JavaScript-only mode cannot do.

Translations stop partway through the site

Cause: the account has reached its translated-word limit, and Weglot pauses translating new content until the plan is raised or older translations are removed.

Fix: check the word count in the dashboard against your plan, then trim unused languages or upgrade. Word count grows with the number of target languages, so a large catalog in several languages climbs faster than you expect.

What you can build with Weglot and Webflow

With the store, the CMS, and the marketing pages all translating from one script, a Webflow site can serve every market from a single build instead of a separate rebuild per language.

That opens up a few options that were awkward before:

  • Multilingual product catalogs: new Collection items translate as they publish, so a growing store stays localized without manual tagging.
  • SEO-ready localized pages: language-specific URLs, hreflang tags, and translated metadata let each market rank on its own.
  • Agency-friendly rollouts: the same script-and-dashboard setup repeats across client sites without rebuilding page structure.
  • Consistent brand terms: glossary rules hold product names and technical wording steady across every language.

Weglot's current install steps, the exact snippet, and its API details live on the Webflow integration page, which is the place to start a real build. For the programmatic side, such as syncing translated Collection items or firing translations from CMS changes, Webflow's developer docs cover the Data API and webhooks that make it possible.

Frequently asked questions

Does Weglot replace Webflow Localize?

Not necessarily. For a content or marketing site, Webflow Localize alone often does the job. The case for Weglot is the store: because native Localize cannot translate Ecommerce products, categories, or pages, Weglot covers the part of a Webflow build that Localize leaves in the source language.

Can Weglot translate Webflow cart and checkout text?

Yes. Weglot works on the text that renders in the browser, so it reaches product descriptions, cart contents, and checkout copy. That is the key difference from native Localize, which does not touch Ecommerce Site plan features at all.

Do I need a paid Webflow plan to use Weglot?

Yes. Weglot installs through custom code in your site's Head Code, and custom code injection is not available on the free Starter plan. Any paid Webflow Site plan turns it on. On the Weglot side, a free tier exists for a small single-language site.

Will adding Weglot hurt my SEO?

Not if you use an indexable URL structure. On a subdomain or subdirectory setup with a custom domain, Weglot produces language-specific URLs and hreflang tags, so each language can rank on its own. The JavaScript-only mode changes no URLs and gives no SEO benefit, which is why it suits testing rather than production.


Last Updated
August 16, 2026
Category

Related articles

How to link Webflow forms to HubSpot without losing your form design
How to link Webflow forms to HubSpot without losing your form design

How to link Webflow forms to HubSpot without losing your form design

How to link Webflow forms to HubSpot without losing your form design

Development
By
Colin Lateano
,
,
Read article
How to stream live Postgres changes to a Webflow Cloud dashboard with Supabase
How to stream live Postgres changes to a Webflow Cloud dashboard with Supabase

How to stream live Postgres changes to a Webflow Cloud dashboard with Supabase

How to stream live Postgres changes to a Webflow Cloud dashboard with Supabase

Development
By
Colin Lateano
,
,
Read article
How to customize Webflow form notification emails for every form on your site
How to customize Webflow form notification emails for every form on your site

How to customize Webflow form notification emails for every form on your site

How to customize Webflow form notification emails for every form on your site

Development
By
Colin Lateano
,
,
Read article
How to add reCAPTCHA spam protection to Webflow forms and block automated bots
How to add reCAPTCHA spam protection to Webflow forms and block automated bots

How to add reCAPTCHA spam protection to Webflow forms and block automated bots

How to add reCAPTCHA spam protection to Webflow forms and block automated bots

Development
By
Colin Lateano
,
,
Read article

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logosoundcloud logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logosoundcloud logoreddit logothe new york times logoideo logoupwork logodiscord logo

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free
Watch demo

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.