HomeAdd a widgetWebflow
Add an online store to Webflow
Sell something from Webflow without migrating the site onto an e-commerce platform. One widget is one purchasable thing, checkout runs on Stripe, and the money goes to your own Stripe account.
Free plan, no card. Paid plans start at $19 a month.
Why do it this way on Webflow
Webflow Ecommerce is a separate plan and a separate build. If what you need is a Buy button on a page you have already designed, a Code Embed does it without moving the site onto a commerce plan: the widget renders inside your layout, checkout hands off to Stripe, and your Webflow plan stays whatever it already is.
See it working
This is a real Sorraia shop widget — our own sample product, embedded here exactly the way you would embed yours. Checkout is switched off on this one: click Buy and you will get “This shop is not ready to accept payments yet.” instead of a Stripe page. Everything up to that point is the live product.
How to add an online store to Webflow
A widget that sits in the page flow goes in a Code Embed element, dropped exactly where you want it in the layout. Webflow’s glossary still also calls it the Embed component, so guides naming an “Embed element” mean the same thing.
Webflow words the custom-code gate as: a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site. Publishing to your own domain is the separate gate, and that needs a Site plan — minimum Basic; the free Starter plan publishes only to a .webflow.io subdomain. Custom code is not a top-tier feature: Basic is enough. Webflow re-tiered in May 2026 and merged the CMS and Business Site plans into one called Premium, so any guide telling you to buy a “CMS plan” or a “Business plan” is naming plans that no longer exist for new purchases.
In Sorraia, add the website and verify it — a DNS TXT record, or a meta tag in your homepage’s <head>. Verification is what lets you attach a widget to that site, so it comes before there is anything to paste.
Save the product and the Copy Embed Code popup appears; the Install wizard on the product’s row on the Shop page does the same with a verification step.
In the Designer, open the Add panel (the + icon) → Advanced and drag a Code Embed element to the spot in the layout where the widget should sit. Quick find (Ctrl/Cmd + E) and typing “Embed” gets you there too.
Paste the Sorraia snippet into the code editor and save it (the control reads Save & close).
The canvas will show a grey placeholder rather than the widget — script tags do not execute on the Designer canvas.
Click the Preview “play” icon in the top bar (Cmd/Ctrl + Shift + P), then switch on the Enable custom code toggle in the bottom-left corner. Custom code is off in Preview by default, so without that toggle you still see nothing.
Click Publish. Nothing reaches real visitors until you do.
What you get
Sell something from Webflow without migrating the site onto an e-commerce platform. One widget is one purchasable thing, checkout runs on Stripe, and the money goes to your own Stripe account.
Three ways to charge
A widget is a flat-price Buy Now, a pay-what-you-want donation where the customer sets the amount, or a recurring monthly or yearly subscription. You pick per widget, so a one-off product and a membership can live on the same site.
Three ways to fulfil
Digital emails a signed download link once Stripe confirms payment — the link is good for 24 hours. Physical collects a shipping address at checkout and applies one flat shipping rate, and you mark it shipped. Service skips fulfilment entirely and just tells you the sale happened.
Checkout is Stripe, and the account is yours
Payment runs as a direct charge on your own connected Stripe account, so payouts, disputes, receipts and tax settings stay in the Stripe dashboard you already use — we never hold your money in between. Sorraia takes a platform fee on top, deducted as a Stripe application fee: 2% on Free, falling to 1.5% on Starter, 1% on Growth, 0.5% on Business and 0.25% on Enterprise. Eight currencies are supported.
Orders and refunds in the dashboard
Orders land in Sorraia with the customer, the amount and the site they came from, filterable and exportable like every other list. Refunds are issued from the same place.
More detail in the Help Center: Shop basics · Embedding on your website
Things worth knowing about Webflow
- Scripts do not execute on the Designer canvas — you get a placeholder box — and Preview does not run custom code either unless you switch on the Enable custom code toggle in the bottom-left corner. Between the two, a perfectly working widget can look broken all the way up to Publish.
- With custom code enabled in Preview, Webflow serves the site from a different origin — a {shortName}.canvas.webflow.com subdomain — rather than your own domain. Worth knowing before you conclude something is wrong: what you are testing in Preview is not the hostname your visitors will be on.
- As of August 2020, newly published Webflow sites include jQuery 3.5.1, and Webflow warns that loading another copy in custom code can conflict with it.
- Each Code Embed and each custom-code field caps at 50,000 characters and the limit cannot be raised. A loader snippet is a few hundred characters, so this only bites if you paste an entire inlined bundle.
- For a floating launcher, prefer Footer code over a Code Embed: any ancestor element carrying a transform, filter, perspective or will-change becomes the containing block for fixed-position descendants, and Webflow Interactions add transforms routinely — which would pin the launcher inside that div instead of the viewport.
Questions
Do I need my own Stripe account?
Yes, and that is deliberate. Checkout is a direct charge on your connected Stripe account, so customers pay you and your payouts, disputes, receipts and tax configuration stay in the Stripe dashboard you already control — Sorraia never holds your revenue in between. Our platform fee rides along as a Stripe application fee, from 2% on Free down to 0.25% on Enterprise, so you can see exactly what it is on every charge.
Can I sell a subscription, or take donations?
Both. Each shop widget is set to one of three types — a flat-price one-off, a donation where the customer chooses the amount, or a recurring subscription billed monthly or yearly. Different products on the same site can use different types.
Which Webflow plan do I need?
To run the widget on your own domain, a Basic Site plan or higher. Webflow gates custom code on having a Core, Growth, Agency or Freelancer Workspace or an active Site plan; the custom domain is the separate thing a Site plan buys, and the free Starter Site plan publishes only to a .webflow.io subdomain. Note that Webflow merged the old CMS and Business plans into Premium in May 2026 — you do not need Premium for this.
The embed shows an empty grey box, and Preview does not help. Did I do it wrong?
No — two separate Webflow behaviours are stacking up. Script tags never execute on the Designer canvas, so you get a placeholder there by design. And Preview does not run custom code by default: once you are in preview mode, click the Enable custom code toggle in the bottom-left corner, or turn on “Run custom code in Preview” in Site settings → Custom code so it stays on. Publishing and opening the live URL always shows the real thing.
Add an online store to Webflow
Build it in Sorraia, paste one line into your Webflow site, and change it later without touching the embed again.