It's important to include images in your IngramSpark Share & Sell Purchase Link, because otherwise your customer won't have any idea what the inside of your book looks like.
If you haven't created your IngramSpark Purchase Link yet, you can check out my IngramSpark Share & Sell Purchase Links video tutorial for step-by-step instructions. Once you've done that, you can come back here and add images so that customers can see some details about what's on the inside of your book.
Creating Your Images
In this example, I'll be using images that I created in Canva. My images are around 1000-1200 pixels wide. The way that I laid these out is basically the same way that I laid out the images for my KDP A+ Content. If you'd like to follow along with how I did that, check out my tutorial on How to Add Images to Your KDP Listing.
Hosting Your Images
In order to pull these images in to your IngramSpark Purchase Link page, you'll need to have the images hosted on the web somewhere. There are a ton of different ways to do this, but the easiest way that I've found is to use Tumblr.
Once you have your images ready in Canva, follow these steps:
Go to the Share button in Canva and click on More
From the list of apps, select Tumblr (If you don't have a Tumblr account, you'll need to create one)
From the drop-down select All Pages
Click Publish now
Once your post is published, click Check out your post
Here you'll see your images posted to Tumbler. Right-click on the first image, and select Copy Image Address
Adding Images to Your IngramSpark Purchase Link
Now that your images are hosted on Tumblr, you can add them to your IngramSpark Purchase Link.
Go to your IngramSpark account and click on Titles in the menu on the left.
Click on the title that you want to edit.
Scroll down to the Title Description section and click on the pencil icon to edit it.
Switch to HTML mode by clicking on the HTML button.
At the end of the HTML code, add a line break and create an HTML image tag. You can copy the code below:
<img src="URL">Replace URL with the image address that you copied from Tumblr.
Now, you can click the HTML button again to switch back to regular view and see your changes.
Adjusting Image Spacing
First, an important note on saving changes!
When you are making spacing / visual changes to your HTML code, IngramSpark won't save them unless you also make some kind of change to the actual text content of your description as well! So whenever you are making these visual changes, make sure that you make a small change to the text as well before each save!
How to Place Images Side-by-Side
You may notice that the image is really big! You can fix that by specifying the width in your image tag. For this example, I'll aim to have 3 images in a row, so I'll make each image 30% of the width of the page.
Click the HTML button again to switch back to HTML view.
Add the following code to your image tag:
<img src="URL" style="width:30%">Repeat the process for the other images.
To ensure that your images sit side-by-side, you'll need to remove any line breaks between the tags and only include a space, e.g.
<img src="URL" style="width:30%> <img src="URL" style="width:30%>Save your changes and refresh your Purchase Link to see the images displayed in a row.
How to Add a Vertical Space Between Images
If you find that an image is touching the image above it, and you want to add some space between them, you can put the images in separate paragraph tags. Your HTML should look something like this:
<p><img src="URL"></p>
<p><img src="URL"></p>The Final HTML
Here is the final HTML that I ended up with in my description - feel free to copy & paste this! But just remember to replace URL with the actual image address that you copied from Tumbler.
<p>Book description goes here</p>
<p><img src="URL" style="width:30%"> <img src="URL" style="width:30%"> <img src="URL" style="width:30%">
</p>
<p>
<img src="URL" style="width:100%">
</p>Questions?
I hope this helped! If you have any questions, as always feel free to email me at heather@heathercash.com. Have fun coding!
Note: This post may contain affiliate links. If you use these links to buy something I may earn a commission. Thanks for your support!
Kommentare