Adding an Amazon aStore to WordPress is as simple as pasting a line of code for the embedded iframe (inline frame). To see an example, click the Real Tea button in the top menu. The “gotcha” is that the default full-width aStore is 796 pixels wide. Add a vertical scrollbar for long pages, and it needs 813 pixels. Does your blog have that much available space in the content area for the sprawling aStore? Most do not.
Nevertheless, many folks insist on cramming ten pounds of ‘taters in a five-pound bag when they add an aStore to their WordPress site. Then they complain that it’s cut off on the right, blaming the store instead of their site or blog layout. My objective in this post is to help you mend your evil ways and understand what you must do to make your store fit your blog or vice versa.
The aStore is a really big WIDGET. It has limitations. You can change its appearance by adding your own styles, or “overriding” CSS, in the Color & Design step of the aStore wizard. That’s it. The aStore is on Amazon’s server, not yours, so there’s no direct access to the code. If you want a completely custom store, and you are a programmer, sign up for the Amazon Advertising Product API, or use one of the many third party applications based on the API.
There are several approaches to fitting an aStore into a site or blog:
- Choose a WordPress theme that is wide enough to accomodate an aStore.
This is not as hard as it sounds. While very few themes have a main content area that’s 800px wide, most newer themes are at least 860px or 960px wide and will allow you to turn off sidebar(s) on specific pages or choose a single-column template. If they do not, you can create your own custom WP Page layout for the aStore.You don’t have to buy a premium theme to find one that will work with a store. The free default WP theme, TwentyTen, has great layout choices. The highly-customizable Atahualpa theme includes options for hiding sidebars on specific pages or types of pages and posts without requiring any coding on your part.
- Edit your aStore and select a shared theme that makes the store narrower.
There is a link to Shared Themes in Step 2 – Color & Design, of the aStore editor. You can create your own narrower theme, but it requires attention to every CSS tab in aStore editor, so that the theme displays alright no matter which option a visitor selects. There’s no easy way to seach the shared themes list, unfortunately.I have several 680px shared themes in the list. Just look for Narrow Earth, Narrow Blue Centered, or Narrow Red Centered. Once you apply one of these shared themes, you can safely change the color scheme and fonts without affecting styles that change the layout, so it doesn’t matter which one you choose.
- If you have a narrow theme and don’t want to change, remove the aStore’s own sidebar widgets.
Be aware that the Category Navigation widget is in the aStore sidebar, and will show up even if you have not selected any sidebar widgets on the widgets screen. Category navigation may be turned off on the aStore Settings screen. This strategy works best with single-category stores or simple stores with few categories.Without the sidebar, an aStore can fit into a column with 547px of horizontal space, 530px for the main products table plus 17px for a vertical scrollbar. If you need a simple category navigation menu, make your own and place it above the aStore. To make this work, give the iframe an ID and use it as the target for your category links.
- If all you need is a few more pixels on the right, remove the store’s 24px body margin.
To do that select Edit CSS in Step 2 of the aStore editor and type a style for the body margin in the big empty box on the left of the screen: body {margin:0;}Setting the margin to zero shaves 48px off the width of the store, pushing it up 24px and left 24px.
Get the details
I don’t want to repeat information from other articles I’ve posted on how to make the aStore narrower. So, for detailed instructions on how to work with the aStore layout, please visit my aStore posts at Greene Teapot.
