A very narrow Amazon Store

The aStore below has one category and no sidebar widgets. With these limitations, it can fit in this post. (See a related post on making a full aStore narrower.) For this store, the height of the iframe is set to 1000px, with scrolling="auto" to accommodate long product detail pages or product reviews. The width of the iframe equals the width of the aStore body and div#wrap, both 490px wide, plus 17px for the vertical scrollbar. So, the math is 490px + 17px = 507px.

The basic template is one of my narrow shared templates for the aStore wizard ("narrow earth"). This template sets the body margin to 0 and defines overriding CSS for a store 680px wide, including a sidebar. I changed the colors after applying the narrow template. You may need to experiment with the widths and padding in your aStore to fit your blog's center column.

It's important to understand, before you add an aStore to your blog or website, that simply having an aStore is no guarantee of any income from it. Books that promise riches with little effort are not being truthful. Meaningful content, such as reviews or articles that grow out of expertise and real interest, with links to relevant products tend to be more successful than rubber-stamp aStores, which are generally ignored by search engines. Web visitors need a compelling reason to buy from your aStore, if they can find it, instead of shopping directly on Amazon.com.

Amazon product previews in the blogger template

Notice: Amazon Product Previews stopped working on this blog around June 4, 2010. The problem appears if a jQuery script tag (either 1.2.6 or 1.3.2) is included in the Blogger template. Amazon uses a customized version of jQuery 1.2.6 and a lot of scripting for the previews. I want to keep my jQuery script tag, so the information provided below will work in Blogger, as illustrated by the screenshots, as long as it doesn't collide with the standard jQuery library.

I have added the product previews script to the blog template. If it works, you should see it when you mouseover this link to Merle's Door, a book I read recently.

Product previews work with Internet Explorer and Firefox. In Chrome and Safari(win), both WebKit browsers, the preview box might not display or appear as an empty box (confusing!). In Opera, the preview does not display at all. Product previews with image links work in Firefox, but in Internet Explorer 7 and 8, they may display and then disappear, unless instantly grabbed with the mouse.

To fix the "disappearing preview problem" in Internet Explorer, enclose the img tag in a block element such as <p></p> and/or make the image style "display: block". Doing this makes the preview window open directly over the image (where the user's mouse is located), and it stays open. If the preview opens off to the side, not touching the image, the user cannot "grab" it fast enough to keep it open. Other browsers seem to allow more "blur" time to get the mouse over the popup.

Screenshot of preview with image link in Firefox 3.5:

Screenshot of preview with text link in Firefox 3.5:

See a related post with more information about using the product previews script in a single blog post.

To add the previews script to your blogger template, open the Layout tab and select Page Elements. Then click Add a Gadget in the footer area. Select HTML/Javascript and paste the previews code. Important: Change the ampersand (&) in the script tag to &amp; for compatibility with blogger's strict XHTML doctype.

The script should look like this, with the <script> tag all on one line and no spaces or line breaks within the <noscript> src attribute. (Replace "yourTagID" with your own Amazon associate ID):

<script src="http://www.assoc-amazon.com/s/link-enhancer?tag=yourTagID&amp;o=1" type="text/javascript"></script> <noscript><div><img alt="" src="http://www.assoc-amazon.com/s/noscript?tag=yourTagID"/></div></noscript>

Save changes and try it out!