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.
Hi Araby,
Your site is a great help to me. I am trying to get my head around html and css and the way you lay-out the way to narrow an astore is very helpful.
Just one thing. I have been through the list of shared themes 3 times looking for ‘Narrow Earth’ and could not find it. I found the other two.
Regards, Doreen
Hi, Doreen,
Wonder where it went! Unfortunately, since I added Narrow Earth, it’s at the top of the list when I click the link to view shared themes. However, it really doesn’t matter which of the three you pick. Once applied to a store, you can pick a different color theme, such as Earth, from the Amazon list, or change all the colors in the Shared Theme. The code I added to resize the store will not be modified by changing the colors in Step 2 – Color and Design.
If you wanted to use Narrow Earth because it’s not centered like the other themes, it’s easy to UNcenter the theme. To do that Edit CSS in Step 2, and in the big box on the left, change a couple of lines, as follows:
In the CSS for body:
change: margin:0 auto; to margin: 0;
delete: text-align: center;
In the CSS declaration for #wrap:
delete: text-align: left;
delete: margin: 0 auto;
Best,
Araby
Evening! – (it’s evening here)
Thanks for your reply. I followed your instructions without difficulty. My astore is cut-off half way on the RHS where the category and search box are.
I tried various sizes – upping the pixels from 680 to 700 and form 680 to 660, but can’t find a snug fit.
Is scrolling the only way to get it all visible?
First thing to do is edit the store iframe tag to change width=”90%” to width=”100%”. The iframe is the window through which you view the aStore, so you want that window to use all of the available horizontal space.
After you do that, there is still not enough horizontal space in your layout to display the store without cutting off some of the right sidebar, especially when there are product reviews that will cause a vertical scrollbar to appear. A scrollbar is 17px wide. Since you are using the TwentyTen theme, one solution is to choose a single-column page layout for the WP store Page. With the WP sidebar out of the way on that page, focus will be on the store, and it will have some breathing room.
I seem to remember a problem with TwentyTen, in that some styles need to be added to allow the main content to spread out into the sidebar area. If that’s still a problem with TT, I may have the code saved somewhere.
And, it’s almost evening here in Tennessee, but not quite.
Hi Araby,
Thanks for the above. I have gone to 100%. The store almost fits. There’s no difference in the views between the default or one-column template.
On the viewed page, there is room to shift the store more towards the LHS because the page header is further left than the astore.
I am only starting to learn html seriously now. (too old to have done it at school!) I looked at the style.css for TT and it seems to me that the one column layout is 640 px. That’s less than the 680 above. It goes on to say that an attachment page of 900 pixels can be added, – I suppose I should ask on their forum how to add that page. WordPress forum is not my favourite place
My store has so much ‘menu’ that I think I need it to show otherwise visitors will be at a loss as to how to navigate it.
Hope you have a good day
The problem with one-column layout can be fixed using CSS to style the content div. I will send you some code off-list, and you can give it a try.
I found the code, but it was for a full-width aStore and no sidebar. If you want to keep the sidebar, try this:
1. Change the width of the iframe from 100% to “697″
2. Add an inline style like this:
<iframe style="margin-left: -20px; margin-right: -20px;" … ><iframe>
I’m certain this will work unless you made your sidebar wider than the default.
Brilliant. It worked beautifully. The store now looks more professional and less homemade.
Thank you so much for this help. A little farther down the line I may understand what it is you did though I have a vague idea with the -20 for margin left.
I ‘stumbledupon’ your site (where it’s already got some hits) and intend to bookmark it at the other social networks I visit.
For wanting of knowing how else to express my thanks – God bless you, Araby.
I’m so glad it worked. Thanks!