Knowledge base
Guides
Academy
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.

Buy Button layouts

There are three ways to show a Buy Button on your site—button, compact, or full-size view:

Buy_Button__1_.png

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 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.
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.

Before creating a Buy Button, you need to sign up for Ecwid and set up your Ecwid account with products, and add payment, and shipping options that you want to offer to your customers.

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 Overview.
  2. Scroll down to the Buy buttons card and click Get Started:

    Buy_Button__2_.png

  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 + Add Custom Label.
  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. 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.
  • To immediately redirect a customer to the checkout after they click on the Buy Now button, go to Settings → General → Cart & Checkout → Checkout settings and switch the toggle next to Open bag when "Add to bag" is clicked.
Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
114 out of 223 found this helpful
10
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