Buy Button
Ecwid Buy Button is a product card and checkout that can be placed on an external website or blog with a piece of code. You can decide to show a full-size product card with a product description, image, and price or a compact version of a Buy Button. It’s easy to change the Buy Button text and color to match your site design.
After the product card is embedded into a page, customers can click the button to add an item to the cart and continue to checkout without ever leaving the site. Orders made with a Buy Button will appear on the My Sales → Orders page in your Ecwid admin.
Before you start
If you don’t have an Ecwid account yet, then sign up! All you need is your name and email.
Once you sign up, start off with the store setup:
- Add your items
- Set up payment methods
- Set up shipping/delivery/pickup methods
- Personalize store design
Learn more about initial online store setup from Getting started with Ecwid →
After you set up your store, you can create Buy Buttons to sell individual products on your website or blog.
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.
|
Making changes to a product after placing a Buy Button (e.g., renaming, changing the price, or description) will be reflected on a Buy Button. When a product or product variation becomes out of stock, the "Buy Now"/"Add to Bag" button turns unavailable. Though your Buy Button will still be present on the page, it'll be impossible to buy the sold-out product or product variation.
Creating a Buy Button
To add a Buy Button to a webpage, you need to copy an automatically generated integration code. After that, you can embed your product into any website or blog. The product card can be placed anywhere on a webpage, on a side panel, site footer, or on 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 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! You turned your regular page or blog post into a selling channel using a Buy Button. Now your customers can make an order without leaving your site. Orders made with 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 Buy Button
You can be very specific about what text to put on the button that your customers will see. It can be “Buy Monstera”, “I want this!”, “Request a Quote” or any other phrase. The default text on the Buy Now or Add to Bag button can be replaced with the Store Label Editor.
To change the wording on a Buy Button:
- From your Ecwid admin, go to Settings → Edit Store Labels.
- Click + Find label to change.
- 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 Buy Button
Apart from changing the wording on a Buy Button, you can customize the button’s appearance to fit your needs and your company’s brand:
- 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