Setting up the Buy Button on any website
The Ecwid Buy Button lets you embed a customizable product card and secure checkout on any external website, blog, or non-Ecwid platform with a simple piece of code. You can choose between a full-size product card displaying the product image, description, and price or a compact version with just a button. Customers can browse, add items to their cart, and complete the purchase—all without leaving your site.
Any updates to a product in your Ecwid admin will automatically reflect on the Buy Button. You can easily customize the text, color, and appearance to match your brand. Orders placed through a Buy Button appear on the My Sales → Orders page, making tracking and managing purchases seamless.
Ways to use Buy Buttons
The Ecwid Buy Button is a versatile tool that lets you sell products, services, subscriptions, or even accept donations from virtually any online platform. Since it’s an embeddable, clickable button, you can add it to websites, blogs, emails, and even social media posts—turning any digital space into a checkout-ready storefront.
Here are some great ways to use Buy Buttons:
- Sell directly from your blog: Embed a Buy Button within blog posts to showcase and sell products related to your content.
- Feature products on your existing website: Keep your best-selling or featured items visible on every page.
- Add checkout to existing product pages: If you already list products on your site, simply insert a Buy Button to enable online checkout.
- Create a product showcase: Build a dedicated page that highlights every advantage of your product, complete with a direct Buy Button for easy checkout.
With the Ecwid Buy Button, any online space can become a sales channel, making it easier than ever to reach customers and increase conversions.
Before you start
To start using the Ecwid Buy Button, you’ll first need to set up an Ecwid account—all it takes is your name and email. Once registered, follow these steps to get started:
- Add a product. Set up at least one product in your Ecwid store that you want to sell using the Buy Button.
- Enable a supported payment gateway. The Buy Button requires a compatible payment processor to accept payments. To check the available options in your country or region, refer to the Payment options by country.
- Set up a shipping method. Learn more about Choosing the right shipping strategy for you.
- Complete your store setup. If you’re new to Ecwid, it’s helpful to go through the Getting started with Ecwid guide to configure your store settings, shipping, and taxes.
Once your store is ready, you can generate Buy Buttons to embed on your website, blog, or other online platforms—making it easy for customers to shop seamlessly.
Buy Button layouts
There are three ways to show a Buy Button on your site—button, compact, or full-size view:
| Layout | Use case |
| Button only | Just a Buy Now button without any image or price. Works best for blog posts and pages with complete product descriptions. For example, if you describe a product or have already showcased it on the page, add a Buy Button to offer an online checkout. |
| Compact | A minimalistic product card with a Buy Now button. It suits best site pages with a detailed product description. Add a short product summary using its image, name, and price. Additionally, you can display product options, input fields, and a quantity. If you have a sale price for this product, it will also be displayed. |
| Full-size |
A full-scale product card with an Add to Bag button.
There can be only one full-size layout per page. The related products section will not be displayed on the product card.
|
Creating a Buy Button
Before creating a Buy Button, you must add the product in your Ecwid admin and set up all necessary functionality like payment and shipping options.
When generating a Buy Button, you can select a layout style and customize its color, text, and appearance. To embed a Buy Button on a webpage or blog, copy the automatically generated integration code and paste it where on your website you want the button to appear. The product card can be placed anywhere on the page, including a sidebar, footer, or even an error page.
To create a Buy Button:
- From your Ecwid admin, go to Sales Channels.
- Scroll down to the Buy buttons card and click Get Started:
- On the opened page, click Pick Product and use the search bar to pick a product you’d like to embed.
You can also access the Buy Button creation wizard for a specific product straight from its product's details page ("Buy Now" Button tab → Embed Product). - Customize your Buy Button—pick a layout and click Appearance to choose what product details to show.
- Click Generate Code, then click Copy Code.
- Open the site editor of your site builder, or log into your website backend. If you don’t know how to go to your store’s backend, contact your site administrator or a designer who created the site.
- Select the page where you want to display the Buy Button.
- Paste the integration code to a page. Depending on your website, that may be an HTML or source tab or a separate button to add codes. If you are not sure how to add custom codes to your website, contact your website developer for more detailed instructions.
That’s it!
Any updates made to a product after placing a Buy Button—such as renaming, changing the price, or updating the description—will automatically reflect on the button. If a product or product variation goes out of stock, the "Buy Now" or "Add to Bag" button will be disabled, preventing customers from purchasing the sold-out item. However, the Buy Button itself will remain visible on the page.
With the Buy Button, customers can place orders directly on your site without being redirected elsewhere. All orders made through a Buy Button will appear on the My Sales → Orders page in your Ecwid admin.
If your site is created with one of the following site builders, you can read more detailed instructions on how to add a Buy Button:
- Adding Buy Button on WordPress
- Adding Buy Button on Wix
- Adding Buy Button on Squarespace
- Adding Buy Button on Joomla
Changing text on the Buy Button
You can customize the text on the Buy Button to match your brand's tone and messaging. Whether it’s “Buy Monstera,” “I Want This!” or “Request a Quote,” you have full control over what your customers see. The default “Buy Now” or “Add to Bag” text can be modified using the Store Label Editor.
To change the wording on a Buy Button:
- From your Ecwid admin, go to Settings → Edit Store Labels.
- Click + Get started.
- Use the search bar to find the necessary label. For example, “Buy Now”.
- Enter your custom text to the field. For instance, enter “Order now” instead of “Buy Now”.
- Changes will automatically apply for all Buy Now buttons in your store, including the one you placed on your website or blog.
Customizing appearance of Buy Button
Beyond customizing the text on a Buy Button, you can also adjust its appearance to align with your brand and website design:
- Hide the bottom navigation menu or breadcrumbs from product details pages in Design → Storefront additional settings and Design → Navigation. It can be useful if you’re going to add different full-sized product cards to different websites and don’t want customers to navigate your store.
Changes made on the Design page affect all the products in your store. - Change the look of the product card and buttons to match your website’s theme with the help of CSS codes. For example, colors and fonts of a Buy Now button. You can use the codes from Ecwid CSS Cookbook or configure the code yourself.
- You can immediately redirect a customer to the checkout after they click on the Buy Now button.
Related articles
Buy Button: 7 Ways to Sell Beyond a Storefront (Ecwid Blog)
Adding Buy Button on WordPress
Adding Buy Button on Wix Checkout buttons