How to Use Images for Your Book’s Purchase Links

The Novelist plugin allows you to set up purchase links for your books. Each purchase link has a template associated with it. Here’s the default template for Amazon:

<a href="[link]" target="_blank" rel="noopener noreferrer">Amazon</a>

Screenshot of the purchase link template UI

This is an HTML link. On your public book page, it just looks like plain text.

Plain text purchase links

But with a little tweak of the template, we can easily use images instead!

First, upload your images.

Find the images you want to use for each retail site and upload them to your website (Media > Add New). For example, here’s a link to a page containing downloadable logos for Amazon.

After uploading them, you’ll need to copy the URLs for each one.

"Edit Media" page where you can copy the image URL

Then edit your purchase links templates.

Head on over to Books > Settings and in the “Book Layout” tab click on “Purchase Links”.

We need to go from this:

<a href="[link]" target="_blank" rel="noopener noreferrer">Amazon</a>

To this:

<a href="[link]" target="_blank" rel="noopener noreferrer"><img src="IMAGE URL HERE" alt="Amazon"></a>

In short, we’ve removed the word “Amazon” and replaced it with a new snippet of HTML code. You need to paste that image URL you copied inside src="" and move the name of the site inside alt="".

Here’s an example of my final template for Amazon:

<a href="[link]" target="_blank" rel="noopener noreferrer"><img src="http://localhost/wp/wp-content/uploads/2016/04/amazon-logo.png" alt="Amazon"></a>

And now here’s how it looks on my book page:

A book page showing images for the purchase links