Customizing The Checkout Buttons

This page takes you through the steps to customize the default SendOwl 'Add to Cart', 'Buy Now', and 'View Cart' button  images (to replace the default button image with your own button image).

Table of Contents:


Here are some reasons you might like to customize the SendOwl checkout buttons:

"The color and size of the default buttons do not match my website branding and I'd like to use a custom 'Add to Cart' button"

"I have more than one 'Buy Now' button on my webpage and it looks confusing. I'd like to show different buttons for each product"

Video Walkthrough

This video takes you through customizing the SendOwl checkout buttons (1min 54secs):

Walkthrough With Screenshots

The following screenshots take you through the same sequence as shown in the video:

Log into the SendOwl control panel.
Direct link: SendOwl Login.
Once logged in, navigate to the product details page by clicking 'Products' and then the specific product link:
Once on the product details page, scroll down and at the bottom, click 'View Button Code':
On the button code page, scroll down to see the 'Buy Now', 'Add to Cart', and 'View Cart' button code section:
That's the code that, when pasted into your website, creates the three main SendOwl checkout buttons:
Once the code has been added to your webpage and is working as expected, the next step is to change the button image to one you prefer.
Note: In this example, I am using WordPress but the following steps work in any webpage: all we are doing is replacing a single link to an image.
When you paste the button code into your web page editor, you will see three lines of code. The first and last line create the popup modal and define which product will be purchased. We don't need to touch those lines.
It's the second line that contains the link to the image that we provide for the checkout buttons:
Simply replace that URL (which points to the SendOwl button image) with a link to your own button image.
In this example, I want to use a large round button instead of the default SendOwl button.
All I need to do is take the URL that points to my new button image:
And paste it into the second line of the code (replacing the original button image).
It's as simple as that: replace one URL (which points to the SendOwl button image) with the URL that points to your new, custom button image:
Now the default 'Buy Now' button image has been replaced with the new, round button:
Everything else works in exactly the same way.
All we've done is replace the default SendOwl button image with one of our own.