Knowledge base
Video tutorials
Try searching for:
Recently viewed articles:

Table of contents

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.

This article is about an embeddable product card. To display "Buy Now" buttons in the product grid in your storefront, use your store's design settings and settings in the Instant Site editor.

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.

A full-scale product card with an Add to Bag button.
Use this layout for landing pages or in a blog post. You can choose from two layout options:

  • 2 columns — in case you want to draw attention to product images
  • 3 columns — in case you want to draw attention to product description
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.

For WordPress users: use the Ecwid plugin to quickly create a Buy Button on your WordPress site without generating code.

To create a Buy Button:

  1. From your Ecwid admin, go to Sales Channels.
  2. Scroll down to the Buy buttons card and click Get Started:


  3. 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).
  4. Customize your Buy Button—pick a layout and choose what product details to show.
  5. Click Generate Code, then click Copy Code.
  6. 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.
  7. Select the page where you want to display the Buy Button.
  8. 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:

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:

  1. From your Ecwid admin, go to Settings → Edit Store Labels.
  2. Click + Find label to change.
  3. Use the search bar to find the necessary label. For example, “Buy Now”.
  4. Enter your custom text to the field. For instance, enter “Order now” instead of “Buy Now”.
  5. Changes will automatically apply for all Buy Now buttons in your store, including the one you placed on your website or blog.
If you produce custom-made goods, learn more about requesting a quote in your Ecwid store.

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 footer menu or breadcrumbs from product details pages in DesignStorefront navigation & colors and DesignNavigation. 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

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
7 out of 13 found this helpful
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline