Add a buy button to any page
Embed a morebasket buy button on your blog, landing page or another site so shoppers can buy a product with a card without leaving the page. Pro plan guide.
The morebasket team ·
A buy button lets you sell from a page that is not your storefront, such as a blog post, a landing page or another site you control. Create a widget in your admin, copy its script, and paste it where the button should appear. The shopper buys one product in one step and pays by card with Stripe, without leaving your page. The plan list puts buy-button widgets on the Pro plan.
When is a buy button useful?
Use one when your readers are already on a page you own and you want them to buy without a detour.
- A blog post that reviews or explains a product.
- A landing page for a launch or a single offer.
- A personal site or portfolio where you show your work.
- A page on another site you control, such as a newsletter archive.
If you have a full store, keep it as your main shop. The buy button adds an extra door into the same catalog, for one product at a time. Read Buy button for the overview.
What do I need first?
- A morebasket store on the plan that includes buy-button widgets. The plan list puts them on Pro; check the pricing page.
- A product with a price, photos and a description. See Products.
- At least one shipping option set up for your store’s default region. The button applies your cheapest available option automatically, so make sure that price is one you are happy to charge. The shipping guide covers this.
- A connected Stripe account. The button takes card payments through Stripe only, and PayPal is not available in it. The payments guide covers the connection.
- Access to edit the page where the button will go.
1. How do I create a widget?
In your admin, create a buy-button widget and choose the product it should sell. Each widget gets its own sales channel and its own key, so you can see which page an order came from.
Use one widget per page or per purpose. A widget for your blog and a separate one for a launch page let you tell the orders apart later.
The widget sells a single product, using that product’s first variant and a quantity of one. There is no basket and no size or color picker. So pick a product that is complete as one purchase, such as a single scarf, an ebook or a one-size item. If you sell something with several options, link to your storefront for the other choices.
2. How do I copy the snippet?
Copy the small script the widget gives you. It is a short piece of code. You do not need to change it. Keep it in a safe note until you paste it.
3. How do I paste it into my page?
Paste the snippet where you want the button to appear. The page does not need to be one of your storefront domains, because the widget talks to your store through a proxy.
Where you paste depends on your page editor:
| Where your page lives | What to look for |
|---|---|
| A site builder | A block for custom code or an embed |
| A blog platform | An HTML or code block |
| A hand-written page | Paste into the page’s HTML where you want it |
If your editor strips scripts, look for a setting that allows custom code, or ask whoever manages the site.
4. How do I test it?
Open the page and run through a purchase: press the buy button, enter an address, and pay by card. Shipping is applied for you using your cheapest available option, so the shopper does not choose it. The order arrives in your orders list, tagged with the widget’s channel.
Test on a phone as well as a computer. Check that:
- The button appears where you expect.
- The right product shows, with the right price.
- The shipping price added is the one you expect.
- The shopper stays on your page while paying.
- Payment completes, and the order shows in Orders.
How do I tell which page an order came from?
Each widget has its own sales channel. Open the order and look at its channel. If you use a different widget on each page, you know which page led to the sale. This helps you decide where to write more.
What should the page around the button say?
A button alone is not enough. Surrounding words reassure shoppers.
- Say what the product is and who it suits.
- Mention shipping and returns in a line. Handle orders, returns and exchanges can help you decide your policy.
- Keep the button close to the words that persuade.
- Use one clear action. Too many buttons slow people down.
Does the buy button work with other channels?
Yes, it is one of several ways to sell. The same products can be sold on your storefront, on your buy-button pages and the Google and Meta product feed. See Sales channels for how they fit together.
How do I make the button easy to trust?
Shoppers on a blog post or a personal page may not know your store yet. A few small touches help them feel safe to pay.
- Use your store name on the page, so the button and the page feel connected.
- Add a short line about who you are and what you make.
- Show clear photos of the product beside the button, not only inside it.
- Make your contact details easy to find, in case someone has a question before paying.
These cost nothing and answer the worry most shoppers have: “Is this a real shop?”
What mistakes should I avoid?
- Skipping the test order. Always buy once through the page.
- Choosing a product that needs options. The button sells the first variant only, so use it for single-option items.
- Reusing one widget everywhere. Separate widgets give you cleaner order tracking.
- Forgetting shipping. The button uses your store’s default region and your cheapest shipping option, so say in the page text where you ship.
- Hiding the policy. State shipping time and returns near the button.
Next step
Create one widget with one product, paste it into a test page, and buy it yourself. When the order appears with the right channel, publish the page and add widgets to your other pages one at a time.
