Buy Button

Ecwid Buy Button lets you generate an embeddable product card and checkout that can be placed on any type of website. You can add the Buy Button to a webpage (side panels, footer, within your content, etc.), error pages, or blog post where you want the button to appear. Customers will be able to purchase without ever leaving your site.

You can customize a Buy Button’s appearance and layout style. The Buy Button may display information like product images, description, price, quantity, etc. Any updates made on your Ecwid store products will be reflected on the Buy Button end too.

Creating a Buy Button

Before adding Buy buttons to your website, you need to set up your Ecwid account with products and payment/shipping options that you want to offer to your customers. If you haven’t set up your Ecwid account yet, follow the steps from the Initial Ecwid store setup articles.

To create a Buy Button, your storefront must be open. If you close your storefront from customers, you can't create a Buy Button. You can check wether your storefront is open in Settings → General → Store profile.

For WordPress users: simply add a single product to a page using the Ecwid plugin tool.

To create a Buy Button:

  1. From your Ecwid admin, go to the Overview page.
  2. Scroll down to the Buy buttons card, then click Get Started and follow the wizard.
  3. Use the search bar to pick a product you’d like to embed.
  4. Customize the Buy Now button:
    • pick a button layout — Compact, Button only, or Full size.
    • set up the button appearance — pick what product details you want to show (product name, price, options, etc.) and how.

As you customize the button, you can preview your changes.


  1. Click Generate code.
  2. Click Copy code.
  3. Now log into your website backend and open the page where you want to display the Buy button.
  4. 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, please contact your website developer for more detailed instructions.
  5. Save the changes.

That’s it! Open your website and click the added Buy button to see how it’ll work for your customers.

You can track orders from the My Sales → Orders page in your Ecwid admin.

Customizing a Buy Button

When creating the Buy Button, you can easily customize its style to fit your needs and company’s brand.


You can choose the layout of the Buy Button.

Layout Use case
Compact, 1 column

Minimalistic layout for products that represent their benefits efficiently with just an image and a title:


Button only

If a product is already showcased on a page and you just need to add an online checkout:


Full-size, 2 columns

For products that are best represented through images rather than through words:


Full-size, 3 columns

Content-rich layout for products with long text descriptions:



You can change the Buy Button’s color and font, and its text to match your website’s theme. You can do it with the help of CSS codes.

To change Buy Button’s color or font:

  1. From your Ecwid admin, go to Design.
  2. Scroll down to the Themes and in-depth customization section.
  3. Click Create Theme, then Add new CSS theme.
  4. From the CSS Cookbook article copy the necessary code.
  5. Make changes: Add the necessary color code or font name.
  6. Paste your CSS code to the field:


  1. Click Activate on the right to apply this theme to your storefront.
  2. Click Save.
You can also rename your Buy Buttons using the Store Label Editor. For example, if your customers don't buy the product right away (e.g., they place a pre-order or request a quote).
Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
85 out of 165 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