HomeAdd a widgetWebflow
Add a Shop to Webflow
Put a shop on a page you’ve already designed in Webflow, live with one copy-paste into a Code Embed, with payments landing in the site owner’s own Stripe account.
Needs a Webflow plan that allows custom code: a paid Workspace or an active Site plan
Free plan with no time limit, no card.
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
Webflow Ecommerce is a build of its own: switching it on adds Products and Categories collections, reserves URL slugs, and can’t be undone. If what the site needs is a Buy button on a page you have already designed, a Code Embed does it — the widget renders in your layout, checkout runs on Stripe’s hosted page, and the money goes to the site owner’s own Stripe account. The site still needs a plan that allows custom code.
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 → Elements → Custom Code and drag a Code Embed element to where the widget should sit. Quick find (Cmd/Ctrl + E, then type “embed”) gets you there too.
Paste the Sorraia snippet — only the snippet, with no <html>, <head> or <body> tags — and click Save & Close.
The canvas shows a placeholder instead of the widget: Webflow does not run a Code Embed that contains a script in the Designer.
To see it before publishing, open Preview and switch on the Enable custom code toggle in the bottom-left corner — custom code is off in Preview by default.
Click Publish and select the domain. Nothing reaches visitors until you do.
Where these steps come from:1234
Add the DNS TXT record where the domain’s DNS lives, or paste the meta tag into Site settings → Custom code → Head code — Webflow says meta tags always go in the head — and publish.5
A Code Embed needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan. Your own domain is a separate gate: Starter publishes only to .webflow.io, Basic adds a custom domain, and Premium — CMS and Business, merged in May 2026 — isn’t needed for a static embed.267
Worth knowing for this one
- Webflow’s own help adds Shopify’s Buy button through a Code Embed too (Add panel → Custom Code → Code Embed), but binds it to a CMS collection, so it only works on Collection pages or in a Collection list.81
- A plain Code Embed works anywhere in the design and needs no CMS collection, so a Basic Site plan — the custom-domain plan without the CMS — runs it.26
- Webflow Ecommerce doesn’t support Localize: on a localized site, its products, categories and pages can’t be translated.9
What Webflow already has
Webflow Ecommerce is the native route: an Ecommerce Site plan — Standard, Plus or Advanced — runs Webflow’s own cart and checkout, with a 2% transaction fee on Standard and none on Plus and Advanced. Once enabled on a site it can’t be removed, and its collections and reserved slugs stay. For a full store that is the right build. For one product on a site that is otherwise finished, a Sorraia shop widget avoids that commitment.910
What’s included
- Payments land in the site owner’s own Stripe account
- Styled to match: colours from the site’s brand kit
- Live with one copy-paste
- One dashboard across client sites
Free plan with no time limit, no card.
More detail in the Help Center: Shop basics · Embedding on your website
Questions
Do I need a Webflow Ecommerce plan to sell one product?
Not for a Sorraia shop widget. Webflow’s Ecommerce plans run Webflow’s own checkout; the widget checks out on Stripe’s hosted page, so the site only needs a plan that allows custom code, such as the Basic Site plan.
Can I turn Webflow Ecommerce off later?
No. Webflow says that once Ecommerce is enabled on a site it can’t be deactivated or removed, its collections can’t be deleted, and its reserved slugs can’t be reused — worth knowing before switching it on for a single product.
Who receives the payment when someone buys?
The buyer pays on Stripe’s hosted checkout, and the payment lands in the Stripe account connected to that site in Sorraia. Each site can connect its own, so a client’s revenue can go straight to the client’s Stripe.
Why is the Buy button a grey box in the Designer?
Webflow’s canvas shows a placeholder for any Code Embed that holds a script. Switch on Enable custom code in Preview, or publish, to see the real button.
Does the widget sit inside my Webflow layout?
Yes. A Code Embed renders the widget in the page itself, at the spot where you placed the element, so it sits in the flow like any other element and takes its colours from the site’s brand kit.
Sources
- The Add panel · help.webflow.com
- Custom code embed · help.webflow.com
- Preview mode · help.webflow.com
- Publishing a site · help.webflow.com
- Custom code in head and body tags · help.webflow.com
- Choosing a Site plan · help.webflow.com
- May 2026 plan changes · help.webflow.com
- Shopify Buy buttons · help.webflow.com
- Webflow Ecommerce overview · help.webflow.com
- Ecommerce payment providers · help.webflow.com
Each page read and checked on 20 October 2026.
Add an online store to Webflow
Build it in Sorraia, put it live on your Webflow site with one copy-paste, and change it later without touching the embed again.