Expand your Webflow store for global customers with Weglot integration that adds multilingual ecommerce without extra rebuilds or CMS duplication.
Weglot's JavaScript-based translation service integrates with Webflow's ecommerce platform to deliver multilingual online stores without duplicating CMS content or rebuilding checkout flows.
This integration combines Webflow's visual development capabilities with Weglot's automated translation detection to create a global storefront that is simple to maintain.
Prerequisites and account setup
You'll need active accounts and proper access credentials for both platforms before starting the integration process.
Required accounts:
- Weglot account with API key access
- Webflow site with e-commerce plan enabled
- Custom domain connected to Webflow hosting (not .webflow.io)
You'll need a custom domain because Weglot's setup process requires production domains for proper DNS configuration and language routing.
Access requirements:
- Webflow site admin permissions for custom code settings
- DNS management access for subdomain configuration (if using subdomain routing)
Integration architecture overview
The Weglot-Webflow integration uses client-side JavaScript to detect and translate content dynamically while preserving Webflow's hosting infrastructure and design systems.
Here's a visual representation of how this integration works:
The core components of this architecture include:
- Weglot JavaScript SDK that handles automatic content detection and translation overlay
- Webflow CMS collections that provide source content through standard template structures
- URL routing system that manages language-specific paths via subdirectories or subdomains
- Translation management that happens through Weglot's dashboard and visual editor
This architecture maintains Webflow's clean HTML/CSS output while adding multilingual capabilities without server-side modifications.
Setting up the Weglot Webflow integration
At a high level, you'll:
- Add Weglot's JavaScript library to your Webflow site
- Configure URL routing for language paths
- Set up translation rules for CMS content and checkout flows
You'll work primarily in Webflow's custom code settings and Weglot's dashboard to connect the two platforms.
JavaScript integration setup
Add Weglot's translation library to your Webflow site project through the custom code settings.
The JavaScript approach provides optimal performance for ecommerce implementations and automatically detects CMS content, product pages, and checkout elements.
To get started, select your site from your Webflow dashboard and navigate to Site Settings > Custom Code > Head Code. And add the Weglot initialization snippet:
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
Weglot.initialize({
api_key: 'YOUR_API_KEY'
});
</script>
After that, you'll need to:
- Obtain your API key from the Weglot dashboard
- Replace
YOUR_API_KEYwith your actual key in the snippet above - Paste the complete code in Webflow's head code section
- Publish your site to activate the integration
After publishing, Weglot's script loads on every page and begins detecting translatable content automatically. The language switcher appears based on your dashboard configuration.
Note on API key security: Weglot API keys are designed for client-side use and are restricted by domain. Request domain whitelisting through Weglot support to ensure your key only works on your specified domains.
Configure language routing structure
Set up URL patterns for multilingual content using either subdirectory or subdomain routing based on your SEO and technical requirements.
Subdirectory routing consolidates SEO authority while subdomain routing provides clearer language separation for international targeting.
Subdirectory routing (recommended for ecommerce)
- Format:
example.com/fr/,example.com/es/ - Benefits: Inherits root domain authority, simpler DNS management
- Configuration: Enable in Weglot dashboard > Project Settings > URL structure
Subdomain routing
- Format:
fr.example.com,es.example.com - Benefits: Separate language entities for search engines
- Requirements: Manual CNAME records for each language subdomain
At a high level, you'll:
- Choose URL structure in the Weglot dashboard project settings
- Configure DNS records if using subdomain routing
- Test language switching functionality after publishing
- Verify
hreflangtags are automatically generated
Weglot generates hreflang tags automatically once you publish, so you don't need to manually configure language alternates in your page settings.
Translate ecommerce content and CMS collections
Weglot automatically detects most Webflow CMS content and ecommerce elements without additional configuration. Once the JavaScript integration is active, it automatically translates product names and descriptions from the CMS collections, category pages, cart contents, and checkout forms.
For elements that require specific translation rules, specify CSS selectors in the Weglot dashboard dynamic content settings:
- Classes: .
your-class-name - IDs:
#your-element-id - Data attributes:
[data-translate]
Weglot translates all detected content using neural machine translation automatically. From there, you can refine translations through Weglot's visual editor, order professional translations through the dashboard, or set up glossary rules to maintain consistent product terminology across languages.
Set up multilingual checkout and payment flows
Webflow handles checkout through its native checkout pages. The Weglot integration translates these pages automatically, including form fields and error messages.
At a high level, you'll:
- Verify checkout page translations in Weglot dashboard
- Test form validation messages in all target languages
- Configure payment provider language detection
- Ensure order confirmation emails respect user language
Payment provider configuration
Webflow Payments (powered by Stripe) automatically detects the user's language based on their browser settings. Stripe Checkout supports 34 languages and handles localization automatically.
PayPal redirects to PayPal's localized interface automatically without additional merchant-side configuration.
If you need to handle payment-related error messages from your payment provider's API:
// Example error localization pattern
const errorMessages = {
'card_declined': {
'en': 'Your card was declined',
'fr': 'Votre carte a été refusée',
'es': 'Su tarjeta fue rechazada'
}
};Verify integration and test functionality
Confirm the integration works correctly across all languages and e-commerce functions before launching.
Core verification checklist:
- Language switcher appears and functions on all pages
- Product pages translate completely, including descriptions and pricing
- Cart and checkout process maintains functionality in all languages
- CMS collection pages display translated content properly
- URL structure follows configured routing patterns
SEO verification checklist:
hreflangtags are automatically generated on all pages- Meta titles and descriptions are translated per language
- Language-specific sitemaps are accessible at
https://yourdomain.com/sitemap_[language_code].xml - Canonical URLs point to appropriate language versions
For performance testing, monitor page load times with translation active, as the JavaScript integration can impact mobile performance.
Test on a staging custom domain before deploying to production. Create a separate Weglot project for staging if you need isolated testing environments.
Troubleshoot common integration issues
Most Weglot-Webflow integration problems stem from domain configuration, translation detection, or checkout flow setup. Here's how to fix them.
Domain configuration errors: The most common setup issue involves using temporary .webflow.io domains during initial configuration. Always use your production custom domain when setting up Weglot to ensure proper DNS routing and language detection.
Performance issues: If you experience page speed reduction after adding Weglot, optimize images and reduce third-party scripts, and enable Weglot's CDN caching features.
Translation detection issues: If the content isn't being translated:
- Verify custom code placement in the head section (not the body)
- Check for JavaScript errors in the browser console
- Confirm your API key is valid and properly formatted
- Test dynamic content detection with CSS selector configuration
Checkout flow problems: If checkout or forms break in translated languages:
- Ensure payment gateway locale settings match Weglot language codes
- Test form submissions in all languages
- Verify error message translations are properly configured
- Check that AJAX-loaded content is detected by the translation system
For advanced troubleshooting and optimization, consult Weglot's technical support and Webflow's developer documentation for platform-specific guidance.
