How to Add a Buy Button for Your Featured Products

Please note that this buy button is optimized for third-party blogs and mediums that can embed HTML. Using it for social profiles, such as Facebook or Twitter, will provide a link to the product, but not be the cleanest experience. For social we recommend taking advantage of our "Share" links in your product details page.   

The “Buy Button” functionality lets you easily add ecommerce capability to any website by inserting code for a ‘Buy’ button. The Buy button will be connected to your Clover Online account. For example, you may wish to embed a “Buy Now” button for a certain product that you've written about in a blog.

In this case, when readers click the button, they'll be taken straight to your product’s listing on your Clover Online. Clover Online allows you to easily generate HTML code associated with this Buy button, so that you can simply insert it into a supported blog or similar site.

Go into your product menu. Go to the row of the product for which you'd like to get a buy button. Click on the gear icon on the right-hand side. From the dropdown, click "Buy Button."  

Screen_Shot_2017-03-01_at_2.06.37_PM.png 

From here you can edit the text, size and color of the button, by editing in the requisite fields. To the right is how your button will look once it’s live.


Once you’re satisfied with the look of the button, click the green “Get Code” tab on the top right. This will bring up the code that you'll put into your third-party site. Copy it so you can easily paste it into social media profile.

 

 

We don’t recommend any blog provider over another, but we’ll present instructions for some of the more popular providers here:

Wordpress:

Once you’ve got your code, log into your Wordpress account if you haven’t already. Add a new post or page, whatever you’d prefer to display this item.

Tip: One use might be to add a post, to write about this product and then present the “Buy Now” call to action button at the bottom. Another might be to create a page dedicated to product, so readers will see it front and center on your blog.

Ok, after you click add new post/page, scroll over to the right-hand side of the text editor. On top of it, you’ll see text or HTML, depending on what Wordpress version you have. Click the option that pertains to you.

Now, simply paste the code in wherever you want the Buy Now button to appear in your blog. If you’d like it to appear after your content, paste it in last. If you’d like the button to appear in the body of your content, put it in between the desired paragraphs. I want mine at the bottom, so I’m going to paste the code in after all of my text.

When you're done, switch the text editor view back to “Visual.” This is right next to where you clicked text/HTML. Click “Update” and then “Preview Changes” to see how the button looks. If you’re satisfied, go ahead and publish your blog and readers will be able to buy your product straight from your blog! If you’d like to center the button, do so just as you would normal text in your editor. Click on the button, and then select the centered alignment from the top of the editor.

Now when customers see your product, they’ll be able to easily buy it straight from your site!

Tumblr

From your Tumblr dashboard, click on “Text” to create a new post. Click the gear icon in the text editor.

From the dropdown, next to where it says "Text Editor," select HTML. Paste your embed code into the HTML editor, and click post. 

Related Video: How to Get a Buy Button from Clover Online

Need additional help? You can always contact us directly.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.