Get an “add to cart” button for your website

How to add a shopping cart button to your website

Today, when you have a great product or service to sell, it’s easy enough to drum up interest online. You can build your own website, blog about your product and use social media to promote your product launch. Once you have your own website you are ready to take on a world of customers and start selling. But then you realize one thing is missing — the key ingredient of any e-commerce site. You need an “Add to Cart” button so you can actually collect money.

Ecwid is powerful enough to build an entire online marketplace, integrating a shopping cart directly into your website and flexible enough to sell just a single product in a blog post. Once you have signed up for a free Ecwid account and have added your products to the Catalog, it’s time to start selling. Here is how to use Ecwid’s Add to Cart button functionality on your website.

Embed a custom “Add to Cart” button in 3 steps

1. Find your product’s embed code.

From your Catalog, choose the product you want to sell. Go to the product page and select the tab for “Embed product.”

2. Choose your product properties.

You have a few options to display above your “Add to Cart” button:

  • Product picture
  • Title
  • Price
  • Options
  • Quantity

If you prefer the simple route, select just the button property.

3. Copy and paste the embed code into your site.

Copy the HTML embed code, and using a code editor, paste it into a page on your website. Save and preview your new page. Your “Add to Cart” button should appear on your site.

Now that you have added your product widget and “Add to Cart” button, you need it to match the rest of your page. Unlike other e-commerce widgets, which can look clunky and out-of-place, Ecwid allows you to seamlessly maintain one cohesive design across your website.

It’s easy to customize the look and feel of your shopping cart button. Best of all, there’s no need to wrangle with your website’s backend. You can make changes directly from your Ecwid control panel by plugging in some simple CSS styles. I’ll show you how to change your button’s color, text and more.

Customize the “Add to Cart” button color

  1. Once you’ve decided what color you want your button to be, find the corresponding hex code from your website theme or a color generator. You can also choose custom colors for when your customer is hovering over or clicking the button.
  2. Go to Control Panel → Settings → Design → CSS Themes. Create a new CSS theme or open your active custom theme.
  3. Paste this code into your custom theme and replace the hex codes in each style.
.ecwid .ecwid-btn–addToBag {
background: #ff9c33;
}
.ecwid .ecwid-btn–addToBag:hover {
background: #ffc180;
}
.ecwid .ecwid-btn–addToBag:focus,
.ecwid .ecwid-btn–addToBag:focus:hover {
border-color: #ffc180;
}
.ecwid .ecwid-btn–addToBag:active,
.ecwid .ecwid-btn–addToBag:focus:active {
background: #ff9c33;
} 

These hex codes will make your button orange.

  1. Save your new custom theme and preview the shopping cart button on your website to check out your new custom colors.

    2. Customize the “Add to Cart” button text

    Do you want your customers to “Add to Shopping Bag” instead of “Add to Cart”? Maybe you think they should “Buy Now” instead. Like other elements in your Ecwid storefront, you can change any text with the Custom Translation method using a simple script. Paste the code below into your custom theme and replace “YOUR TEXT” with whatever you want your button to say.

<­script>
ecwidMessages = {
“ProductBrowser.ModernButton.add_to_bag”:"YOUR TEXT"
}
<­/script>

Customize the whole design of your “Add to Cart” button

Want a square button? A gradient background? If you’re looking for a complete button makeover, try out a CSS Button generator and play around with the different options. Once you have the look you want, copy the CSS styles that are between brackets { }. In your custom theme, paste the new styles into the brackets for the “Add to Cart” button.

With just a little CSS and Javascript, you can transform your Ecwid widget and “Add to Cart” button to match the styles of your website.

In conclusion

If you’re trying to sell something online, it’s way easier than you might think to add a “Buy Now” button to your site. Not only can you add it, making it easier than ever for customers to pay you for items, but you can entirely customize its look. While there is some copying and pasting of CSS text, you do not need to know how to code in order to do it.

Simply put, there’s no excuse to put off adding an “Add to Cart” button to your website and start selling!