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 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
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 your Ecwid account set up and have added your products to the Catalog, it’s time to start selling.
Embed a custom Add to Bag 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 Bag button:
- Product picture
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 Bag button should appear on your site.
Now that you have added your product widget and Add to Bag button, you need it to match the rest of your page. Unlike other
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 Bag button color
- 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.
- Go to Control Panel → Settings → Design → CSS Themes. Create a new CSS theme or open your active custom theme.
- Paste this code into your custom theme and replace the hex codes in each style.