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.

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’s layout and set up appearance. As you customize the button, you can preview your changes.

Copy_of_Buy_Button__1_.png

  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

You can easily customize your Buy Button style to fit your needs and company’s brand.

Layout

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.


Style

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:

Copy_of_Buy_Button__2_.png

  1. Click Activate on the right to apply this theme to your storefront.
  2. Click Save.
Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
39 out of 83 found this helpful