Fixing Missing Images on Amazon Listings

This is actually the hard part. Where can you find a product image if the picture is missing?

1. Browse the Amazon listings for the book or product (see example above).
   
   You may find another version for sale that's got a picture. Does it have an Amazon price, or at least a Used price? If it's a used book, are there several copies for sale from a few different booksellers? If the answer is yes and yes, feature that product listing in your Amazon module -- you're done!
   
   To find the URL (web address) of a picture on a webpage, Right-click the picture (control-click on Mac) and select Copy Image Location.
   
   
2. Or, you may find a product where someone has uploaded a customer image.
   
   Here's what I found when I clicked on the sixth listing for my book:
   
   
   
   That's more like it! The problem is, since it's customer-submitted, Amazon's being careful: Amazon won't put the picture in the official listing that it sends to off-site widgets. But we CAN!
   
   However, notice the Used Price. 0.01 cents and up? Maybe it's just me, but that looks fishy. What kind of cheap junk am I selling here? So I'm gonna use this picture, but upload it to another listing of the same book where the prices look legitimate.
   
   But before we get to Part Two, let me cover one more possibility.
   
   
3. Suppose no Amazon listing has a picture. Unless you've got the item plus a camera or flatbed scanner to make your own picture, you'll have to do some hunting. Try a Google Images Search with the product's exact name. If it's a book, I find that searching for the author's name often turns up the covers of the author's books, even when individual titles turn up nothing. Remember to "enclose multiple words in quotes" to force Google to match a whole phrase exactly. Or browse used bookstore websites or product catalogs.
   
   One thing: we're fudging copyright a bit. But the copyright holder of a product is its author and/or publisher, who should be happy for the free advertising. A close-up showing nothing but the book cover should be fine. For products, try to find an image of products used in multiple catalogs. You don't want some artsy-fartsy website's fancy product photos that were done by an in-house photographer. Amazon might protect itself from lawsuits by shutting down your account if you swipe a picture from those.
   
   Once you've got a picture, make absolutely sure it's really a photo of the thing you're trying to sell! Then download the picture (Right-click / Cntrl-click and pick "Save Image As...").
   
   Once you've found a picture, go back to the Amazon page of the product you want to feature and click "Share your own customer image"! Upload it! Take a bathroom break while Amazon processes the image. When "See One Customer Image" appears under the missing image box, Amazon has saved it.
   
   
   
   
4. View the picture! Right-click (Mac: Contrl-Click) on the image to get a popup menu. Choose "Copy Image Location". SAVE this URL in a spare text document.

Now that you have the URL of a picture of your product, we can add it to Squidoo!

1. Once you've gotten a bona-fide picture of the product uploaded on its Amazon product page, open the picture, right-click / contrl-click (that's for Mac), and select "Copy Image Location" from the popup menu.
   
   
2. Open a spare text document for taking notes. Paste the image's URL there. Label it so you remember what it is.
   
   
3. Go to Squidoo, edit your lens, and create the Amazon module if you haven't already. Add all the products you want. You should now have a listing like the example at the top of this tutorial, with some pictures showing, some not.
   
   
4. Edit the Amazon module and click the Display Options tab. Uncheck "Picture". Check "Used Price" if you're featuring a used book.
   
   I know, ALL the pictures are gone now. We'll have to add them back manually.
   
   
5. Click the Pick Your Products tab. Scroll down until you see the title of the product. Click the "Add a description" link under the title get a text box.


6. Paste the following code at the start of the description box, replacing the part in orange (the URL after img=" and before the next ") with the customer image URL you copied a moment ago.
   
   <img src="http://g-ecx.images-amazon.com/images/G/01/ciu/ca/a7/0c54224128a002a5e522c010._AA240_.L.jpg" style="height: 75px; margin-left: -90px; margin-top: -55px; float: left;">
   
   Note: if the image is wider than it is tall, then change height to width. That's the code to shrink the image. The units are pixels.


7. Save the module to see how it looks. Almost certainly, the image won't be centered in that gray box.
   
   
   (The Squidoo Amazon module displays product images in an 82x82-pixel box, with upper left corner at margin-left -93, margin-top -60)
   
   
8. Decide whether the image is too far left, up, down, or right. It's time to fiddle with positioning.
   
   • Too far left: Reduce the margin-left. Try -85px.
     
   • Too far to the right: Add a few pixels to the margin-left. Try 95px.
     
   • Too far up: Reduce the margin-top a titch. 50px, maybe?
     
   • Too far down: Increase the margin-top. Say 60px.
9. Keep fiddling until you have the graphic fairly well centered. Then SAVE the module, just to make sure.
   
   
10. For every product in the Amazon module, repeat steps 1-9.

"Wait!" you're saying. "I'm an Amazon Associate! I don't want to share my revenue with Squidoo!" Or maybe, "I can't use a Squidoo module; I need this for my blog / website."

Well, unfortunately, in order to get the current price listed, we need computer programming, and I don't know how to do that. But the programmers at SquidUtils, tools made by and for Squidoo members, do know how.

We can use their code, in exchange for their taking the Associates commission of 1 out of every 10 clicks on a Squidoo lens or 2 out of every 5 on another site. Here's how:

1. Complete Part One above so you have the URL of an image handy.
   
   
2. Go to SquidUtil's Amazon Products Page and create a listing using your Amazon Associates ID and the URL of the Amazon page where you found the product listed.
   
   
3. Copy the Amazon widget code and paste it to your own website. It looks something like this:
   
   <p style="float:left; width:98px;" align="center"><a href="http://squidutils.com/us/B000IUC8JI/mythprint-20" target="_blank" rel="nofollow" style="text-decoration:none;"><img border="0" src="" />
   <b>The House on the Volcano </b>
   [put a caption here if you like]
   <img border="0" src="http://squidutils.com/us/mB000IUC8JI.png" />
   <img src="http://rcm-images.amazon.com/images/G/01/buttons/buy-from-tan.gif" vspace="3" border="0" /></a></p>
   
   
4. See that src=""? That's the missing image. PASTE the url of the product image between the quotation marks. Then, to shrink the image down, add a space and width="98" after the closing quote and before the following />.
   
   Like this:
   
   <p style="float:left; width:98px;" align="center"><a href="http://squidutils.com/us/B000IUC8JI/mythprint-20" target="_blank" rel="nofollow" style="text-decoration:none;"><img border="0" src="http://g-ecx.images-amazon.com/images/G/01/ciu/ca/a7/0c54224128a002a5e522c010._AA240_.L.jpg" width="98" />
   <b>The House on the Volcano </b>
   (Original Title: Kimo and Madame Pele)
   <img border="0" src="http://squidutils.com/us/mB000IUC8JI.png" />
   <img src="http://rcm-images.amazon.com/images/G/01/buttons/buy-from-tan.gif" vspace="3" border="0" /></a></p>
   
   
5. Result:
   
   

   
   The House on the Volcano
   (Original Title: Kimo and Madame Pele)
   
   

   Right now this listing is set to go on the left side of a paragraph of text. If you type anything after it, the words/text will fill in to the right of it. I found that the widget was jammed up too close to this paragraph. To fix the problem, I added padding-right: 20px; padding-bottom: 10px; after float:left; width:98px; and before the quote up at the start of the code snippet. That added a spacing buffer to the right and below the widget.
   
   If you want the listing on the right side instead, change float:left; at the very beginning of the code snippet to float: right; or delete it if you just want the widget centered in its own place on the page. (You'd need to switch my buffer to say padding-left, if you used it.)
   
   If you want to understand how to change the font-size of the caption, adjust padding and margins, add a border or background-color, or otherwise tweak the listing, check out my CSS Codes Tutorial so you can make sense of all this gobbledygook!

The House on the Volcano

If you'd rather not use SquidUtils and want to hand-code an Amazon affiliate widget yourself, here's how to do it from scratch (Example at right). Pros: you keep all earnings. Cons: I can't get the price or fancy button under it the way they can. Also, this takes some serious code.

1. Complete Part One of the tutorial to get a URL for a picture of the product. Copy its URL to a spare text document and keep it handy.
   
   
2. Make a Text-Only Link to an Amazon product (either by clicking on the "Links and Banners" tab on Amazon Associates Central or by using the "Link to this page" option from the Amazon Associates strip while viewing a product page).
   
   
3. Copy the code Amazon gives for a "Text Link."
   
   
4. Paste the code into your website or lens.This makes a clickable text link (Example: The House on the Volcano) which sends your reader to the product page on Amazon and tells Amazon your affiliate code.
   
   
5. What we're going to do is make the text link a caption, and add an image above it which is ALSO a clickable link. I've colored the code Amazon gave us to help you see the pieces we'll be working on:
   
   <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><img src="http://www.assoc-amazon.com/e/ir?t=mythprint-20&l=as2&o=1&a=B000IUC8JI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
   
   Key:
   green: the code that makes the link and marks it with your Amazon Associates ID.
   orange: the book title. The clickable text.
   brown: some fixed bit of code Amazon uses for tracking purposes (I think). Don't touch it.
   
   Now we're going to copy the code that Amazon gave us for making a text link, and replace the book title with a picture. So:
   
   
6. COPY the whole green-orange-green part, from <a href= to </a>.
   
   
7. PASTE a copy just before the whole chunk of code and add <br> (linebreak) between them, like this:
   
   <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><br>
   <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><img src="http://www.assoc-amazon.com/e/ir?t=mythprint-20&l=as2&o=1&a=B000IUC8JI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
   
   
8. REPLACE the first instance of the product's title (blue text) with the following code, plugging the URL of the product image into "urlgoeshere.jpg" :
   
   <img src="urlgoeshere.jpg" border=0 style="width: 116px; margin-bottom: 5px;">
   
   This blue part makes the image and sets its width. The green code around it, which we copied in the previous step, makes it a clickable link just like the text.
   
   
9. Wrap the following around ALL THE CODE:
   <p style="width: 116px; text-align: center; font-size: 9pt; line-height: 10pt; font-family: Arial;">[code from above goes here...]</p>
   
   This purple part groups the image plus its caption together inside a 116-pixel-wide paragraph, forcing the caption's text to wrap if it's wider than the image. I added a few optional font-formatting commands to change the font, shrink and center the caption.
   
   
10. Finished code looks like:
    
    <p style="width: 116px; text-align: center; font-size: 9pt; line-height: 10pt; font-family: Arial;">
    <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI"><img src="http://g-ecx.images-amazon.com/images/G/01/ciu/ca/a7/0c54224128a002a5e522c010._AA240_.L.jpg" border=0 style="width: 116px; margin-bottom: 5px;"></a><br>
    <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><img src="http://www.assoc-amazon.com/e/ir?t=mythprint-20&l=as2&o=1&a=B000IUC8JI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></p>
    
    Result:
    
    

    
    The House on the Volcano

    WHEW! Give yourself a big pat on the back for getting through all that.
    
    See my CSS Codes Tutorial if you want to change the font, move the picture side by side with the caption, resize the paragraph and image, or otherwise tweak the appearance. This example is essentially the "caption under aligned images" trick, except I didn't align the paragraph containing the image and caption. You may want to add align=center or float: right; or float: left; to the opening paragraph tag, and/or some padding to put a buffer around the whole widget.