International ecommerce

Webflow Ecommerce: The 6 Ws for Success in an International Market

Webflow Ecommerce: The 6 Ws for Success in an International Market
Madeleine Leddy
Written by
Madeleine Leddy
Madeleine Leddy
Written by
Madeleine Leddy
Reviewed
Madeleine Leddy
Reviewed by
Updated on
July 31, 2024

Template-averse designers rejoice: Webflow is fully operational for all  your site-building needs, including ecommerce.

You probably know Webflow as a platform with a cool design interface, no-code user-friendly features, a range of integrations for all your inner feature-fiend’s desires, and a pretty dope blog.

What you may not know is the extent to which Webflow’s user community is international. Take one look at the Webflow Designers Global Facebook group member page, and you’ll quickly lose count of the nationalities present.

So what has Webflow done recently to better meet its international users’ needs?

Webflow Ecommerce has been the site of some of the platform’s most important recent global-oriented developments.

This seems to follow the natural order of things, as trade is a driving force for bringing people from all ends of the earth together.

If you’re hoping to open an online store with Webflow, you’re in the right place. Let’s dive in.

So, What are the Keys to International Webflow Ecommerce Success?

For visual learners, here's a quick video on what ecommerce stores need to expand to new markets:

Webflow’s approach to ecommerce is different than that of Shopify, Magento, PrestaShop, and its other competitors on the ecommerce platform scene. Likewise in its approach to site design is different from that of WordPress, Squarespace, etc: Webflow is about building beautiful sites without actually having to code.

Everything on the Webflow ecommerce site-building and site-managing platform is structured to reflect a classic HTML-CSS-JavaScript architecture. Despite being a no-code tool, it’s highly customizable.

All elements that you add to your page are associated with a class. As a design tool, it can only be modified or customized in ways that will allow the content to remain responsive regardless of screen size or device type.

What does this mean for Webflow Ecommerce? Well, for one, it’s highly streamlined. No matter where you’re taking orders from and shipping to, you can count on Webflow’s store-building structure to be adaptable to your business.

The thing with Webflow is that its template-independent architecture gives you total freedom in conceiving and building your user experience. This kind of blank page excites some, and scares others.  When your users/customers are coming from various cultures and places, there’s room for error in building your ecommerce website  from scratch.

We’re here to guide you through at least some of this process, which can be daunting, but should be fun and fruitful. It all starts with the customer: the person you’re launching your Webflow store to please.

1. W…ho is Your Target Customer?

You may be in one of two situations:

  • You’re launching your very first ecommerce store, with Webflow as your CMS.
  • Or, you have an existing ecommerce business  and you’ve decided to migrate your  store from another platform to Webflow.

Depending on how long you’ve been in business, you may know your customers like the back of your hand—or you may not know them at all yet.

Either way, knowing who your site is directed at will inform your website design, regardless of what you may be selling.

If you are a member of the first group, you may not have a lot of data to go on—but that’s okay. You’ll be able to gauge quite a bit about the nature of your potential clients based on that of your business.

You’ll also learn fast, based on how much your products sell in the early days following your initial store launch.

Webflow Features That Will Make yYour Ecommerce Store Pop (For Certain Customers, That Is)

Let’s take the example of British burger joint and caterer, Patty & Bun’s, neon-saturated Webflow ecommerce site, which can be described, in a word, as…psychadelic.

Patty & Bun background video

Patty & Bun have taken beyond full advantage of Webflow’s full-screen background video feature. Their wild, hypersensory brand video is everywhere, from the home page to the menu page (where they’ve used the video gradient overlay setting to light up their color scheme even more):

Patty & Bun website

This is a top-notch example of using Webflow’s versatile (and color-friendly) media layout architecture to reinforce a flashy, memorable brand identity.

This kind of over-the-top brand marketing is y bound to appeal to a younger crowd. This audience, in what some have already coined the “post-Internet age”, are drawn to the MTV-reminiscent fluorescents and animations that may have been deemed kitsch in 2015. But which, in the tradition of nostalgia, seems to be making internet users click again.

But this background video reel and neon overlay may not be for everyone.

An older or vision-impaired customer, for example, might find it difficult to read the site menu with all the activity going on around it. They may not be as likely to want to continue exploring the site and eventually order a burger (or a T-shirt, which are also on sale).

Patty & Bun have adopted a youth-oriented digital identity, and that’s perfectly okay—as long as the youth are who they’re (at least, mostly) trying to feed and loyalize.

As a matter of fact, they’re probably killing it with the younger age groups, who like to be “wowed” on what seems often like an increasingly homogenous Internet.

2. W…here in The World is Your Target Customer Located?

Those of you who fall into the second category from question 1—the veteran ecommerce salespeople—already know from experience that the old adage “location, location, location” applies just as much to ecommerce as it does to real estate.

And no, it’s not necessarily just about where you are located: it’s about where your customers are, and how great the distance(s)—geographic, but also cultural and linguistic—are between you and your potential buyers.

If you’re not yet a seasoned e-merchant, you’ll soon learn that not only does the customer’s geographic location affect shipping logistics when sending them your product.

It also implies that, since this person lives in a region different from your own, they may have different expectations and means in terms of payment, taxes, and language/communication.

How Can Webflow Do My (Customers’) Taxes?

Webflow’s ecommerce functionality makes it pretty simple to get the first two issues out of the way.

When you set up an ecommerce site, your editor space allows you to directly manipulate how you’ll handle tax calculations from different countries.

You can also determine what payment gateways and methods you’ll accept. Remember that neither PayPal, Apple Pay, Google Pay, debit or  credit cards, nor digital wallets are universal—different countries have different preferred modes of payment.:

Setting up your Ecommerce page on your Webflow website

What’s in It For My Multilingual Ecommerce Shoppers?

As for language, Webflow recently launched a native solution. There are three available plans that go on top of the standard site plans. Then, you’ll have to pay extra per language you want to have in your locale. See how Webflow Localization compares to Weglot.

As for us, we’ve been in the business of translating and localizing more than 72,000 websites since 2016. So we understand what Webflow website owners will need when going multilingual, whether they’re beginners using ecommerce templates or seasoned ecommerce merchants looking for advanced functionality.

Weglot works by detecting the content on your site, then generating a first layer of machine translation from leading providers, and finally displaying it for you. That means it’ll translate everything on your ecommerce store–the shopping cart, product listings, checkout process, and more.

That way you get an automated translation workflow, allowing you to focus on managing your store instead of worrying about manually translating new content.

Plus, Weglot is multilingual SEO-friendly. It automates some of the tricky aspects of making a website visible on international search engines, like adding hreflang tags and translating metadata. Your worldwide audience will then discover you faster than before.

You can find detailed instructions on how to install Weglot on any Webflow site here. See Weglot pricing here.

Adding Weglot to your Webflow website

3. W…hat are Your International Customer’s Expectations for Site Design?

If we were to go back to the Patty & Bun example from question 1, we’d probably want to put ourselves in the targeted customer’s shoes: probably Nike Airs or Reeboks. That is to say, its target customer is probably fairly young and urban—since they’re also only located in urban areas.

This customer base, as we inferred, generally wants to be wowed by a website.  There are a lot of sites out there that look exactly the same—largely as a result of template culture and the proliferation of build-it-yourself machines, which some have accused of killing web design). Someone who has grown up on the Internet is likely a little jaded, and tends to appreciate a break from the monotony.

If your target customer is internet-savvy, it’s okay to spice things up a bit—and have their UX journey take some unexpected twists and turns.

Take the Barakunan publishing house site, for example. Like Patty & Bun, these Webflow-based e-merchants have chosen to fill their users’ screens with an immediate surplus of imagery. Theirs isn’t a video, but rather a labyrinthine illustration containing odds and ends of text.

Barakunan website

The bold artwork will undoubtedly catch users’ eyes, but the un-clickable text may confuse some.

Navigating Barakunan requires a bit of thought (which is probably the intention of this rather esoteric publishing house). But this is likely to prove fun for Barakunan’s audience: the creative class, the intellectual, or the underground literature fan.

That brings us to our next question, where we’ll put these kinds of customer-journey twists and turns into perspective—since they may not be adapted to everyone’s browsing process.

4. W…hen Might Your International Customer Encounter Pain Points in the Buying Process?

I. Is Your Homepage Legible to Your Potential Customers?

The maze-like experience of the Barakunan site may captivate blasé browsers of the digital generation. That is, if they are proficient in English (the language in which the site and its text-encrusted imagery are written).

Here’s the thing: Barakunan is likely appealing to English-readers since its publications are exclusively in English. This, despite describing itself as an enterprise “based in Berlin and Beirut,” neither of which is a majority-anglophone city.

Barakunan knows its audience, and knows that even a German or Lebanese reader who stumbles across their site won’t be interested in their products, which are printed in English, unless they can already read English.

Therefore, having their site in English doesn’t pose a language barrier to real potential customers.

But…What If Their Real Potential Customers Didn’t Understand English?

Your home or landing page design plays a key role in converting your site visitors. It’s the first impression that they have of your business.

Google’s own data confirms that visitors to your site formulate this first impression only 50 milliseconds—0,05 seconds—after landing on it.

That’s not a lot of time to grab their attention.

You want to use this time effectively, and ensure that your visitor’s—and potential customer’s—experience isn’t hindered by accessibility gaffes.

You certainly don’t want them spending these precious 50 milliseconds drooling over beautiful site design…only to find that they can’t understand a word on the page. And ultimately, they can’t figure out how to navigate the site.

Make the Language Switch UX-friendly

With a multilingual solution like Weglot integrated into your site, you can avoid losing users to the linguistic void as soon as they hit your homepage.

Making your site multilingual facilitates all of your visitors’ access to your Webflow ecommerce store, regardless of what language they speak.

The basic Weglot integration automatically places a language-switch button in the lower right-hand corner of your site. The diagram below, taken from a study on web design and first impressions at the Missouri University of Science & Technology, lays out the order in which our eyes tend to land on regions of a page.

The initial Weglot button, then, is likely to be looked at about 4th on a typical homepage (with a header, sidebar menu, and diverse body content). The next likely places are the site logo in the header, the sidebar menu, and the header menu.

Diagam illustrating areas of interest on a website

This is a great placement for the language-switch tool as it gives your visitors time to process the visual appeal of the main aspects of the page (Areas of Interest (AOI) 1-3 in the diagram) before proceeding to the rest of the page.

And any visitor who would like to read further but doesn’t speak the site’s original language has until AOI 4 to figure out that they might want to switch to their own language.

If you start to notice a real linguistic heterogeneity in your customer base, you can further facilitate—or even eliminate—this language-switching process.

You can change your button position on your Webflow site by changing its CSS settings in your custom Header code (which you can edit in your Project Settings)….

Adding custom code to your Webflow website

In this example, we’ve used custom CSS to move our button to the top-right hand corner of the page, rather than the bottom.

...or by embedding it as a dropdown in one of your navigation menus, then adding a link for each language you’ve translated your site into. Finally, enter #Weglot- followed by the correct two-letter language code as the URL.

It ends up looking something like ours:

Switching languages on Webflow using Weglot

We’ve also created a Webflow UI Kit just for you which features 14 language switchers you can clone and add to your site, along with clonable language switchers made in collaboration with Digidop. Plus, we’ve got the ultimate walk through video tutorial on Webflow language switcher customization.

You can even relieve your customer of this extra step by activating auto-switch in your Weglot project settings. This will detect your visitors’ default browsing language and automatically deliver the page in that language (if available on your site).

If your audience speaks several different languages, or have numerous target markets with each their own language, this may be the most efficient approach.

This is especially true if you’re fairly certain you’ll be getting lots of traffic from one language group. Chances are that directing them immediately to their language’s version of your site is going to work in your favor.

II. Get Productive: Are Your Product Pages International Crowd-pleasers?

Webflow’s ecommerce platform integrates and allows you to visualize the entire inventory process. This is a huge time-saver, because it prevents you from having to build each product page individually.

You can essentially templatize the style of your product pages by product category, enter your product data into the Products table, and distribute this data across your pre-designed pages.

Of course, this distribution model works great if you want all of your visitors to see the exact same content on your product pages.

But if you’re selling internationally, this may not be the case. You may have, for example, slight variations in the contents, or shipping information, or general descriptions depending on where the customer is buying from.

Weglot can also provide a solution here. If you go into your Weglot Dashboard, you’ll see a “product” URL tab menu in the left-hand URL bar.

Click here to update the descriptions of each of your products for each language. Your users abroad can then have the right information about what they’ll be ordering.

Translation List on Weglot

III. Final Check: Is Your Checkout Page Localized?

It is a subject of great pride here at Weglot that indeed, Weglot does automatically translate Webflow checkout pages.

You can double-check and edit any of your checkout page translations in the Weglot dashboard, just as you would for your product pages, by clicking on the “checkout” URL tab.

5. W…hy is This Potential International Customer So Important?

We’ll keep this short: in 2024, with ecommerce taking up at least 20% of retail worldwide sales, this question almost answers itself.

But it always merits a bit of reminder: ecommerce is, in most industries, inherently more profitable when it’s cross-border-friendly. We’ve got the stats to prove this.

6. W…ebflow: Is It the Right Solution for International Ecommerce?

So here we are: if you’re going to undertake all of this work—delineating your customer base, tracing their experience on your Webflow store, and launching your store IRL—is it worth taking all of these internationalization tips into consideration?

And, if (well, since) the answer is yes, why do it on Webflow in particular?

The answer is simple: Webflow has an active international presence, and Webflow users (as well as its technical team) are legitimately motivated to make it a web-building standard around the globe.

Not only are there several layout features that allow for intuitive switches between languages (even going from LTR to RTL languages— as shown in the GIF below), but Webflow’s user community is also globally distributed and very active.

This means that you’ve got users all around the world, from all cultural and linguistic backgrounds, using the same tool and supporting each other (in places beyond just the Webflow Forum, such as the Webflow Designers Facebook group) at all times.

Webflow x Weglot website

To Answer That Last Question in a Word: Yes.

Armed with tools like Weglot and a good old sense of cultural empathy, your Webflow store is pretty likely to make waves overseas.

While you’re dragging, dropping, and product-describing, take a minute to see how you can improve your overall ecommerce strategy or get some inspiration from these particularly pretty multilingual Webflow sites.

Try Weglot for free today to turn your Webflow website into a multilingual one.

Discover weglot

Ready to display your website in multiple languages?

Try Weglot on your website for free (no credit card required).

Icon blog

In this article, we're going to look into:
No items found.
Try for free