How to Integrate Amazon aStore to Wordpress Page
Amazon affiliate program is probably the oldest and the most successful internet affiliate program in the world. They provide a wide range of supporting tool for their affiliates. However, among those fancy and helpful tools, my favorite is always their aStore.
aStore is a program for Amazon affiliates, that wishes to have their own niche online store, without having to buy inventories, managing payment and shipping. Affiliates can choose on what products they want to sell in their aStore and able to customize the look to meet their website and niche look.
However, there are 3 ways to display aStore, whether it’s a (1) standalone site, and integrating to affiliates website using (2) inline frame and (3) a frame set. The 2nd and 3rd option is super cool. Imagine this, your visitors can shop on your aStore without leaving your website. How cool is that.
This tutorial is using the second option, by using inline frame, which can make your aStore look and feel match with your website as it still using the same Header and Footer. Now let’s see what we can do here.
Customize Your aStore look
The first step is of course you need to set up your aStore. Some notes on this step are:
- Choose products that fit your niche for super wide range Amazon products.
- In aStore set up wizard, don’t use the Header as it will be contrast with your blog’s default header.
- If your blog’s sidebar located at left side, then choose the store’s sidebar, and vice versa if its at right.
- It’s better to edit your store’s CSS to match the feel of your site.
- When it’s all finish, choose to display your store using inline frame. Copy the code and put it to notepad.
Create a new Custom Page for your aStore
This step is pretty tricky. But if you follow step by step, then you should be ok. I use this technique found at Kristarella’s blog (more info on developing pages at Wordpress.org)
1. Copy your page.php file using FTP, rename the file to store.php or whatever you like.
2. Edit the store.php file using your text editor. To remove the sidebar (because you’ll be using your aStore’s sidebar), find this line of codes and delete it:
<?php get_sidebar(); ?>
After that, add this codes at the beginning of store.php file:
<?php/*
Template Name: Store
*/
?>
Finish? Save it and FTP the store.php file to your template folder.
3. Now find this (or by the likes):
<div class="post">
And change it to sort of like:
<div class="post store">
and then styled in the CSS using:
.store { width:30em; }(my aStore was 70em)
4. Back to your Wordpress Dashboard, write a new page, name it Store.
5. Scroll down and find Page Template drop down, choose Store template. You might need also to set the Page Order for your store page.
6. Now copy your inline frame code from Amazon, and paste it to your new page (don’t use Visual mode, use HTML mode instead).
7. Publish your Store Page and you’re done.
Final Result
I implement this to my Manchester United Blog. As the football club has just finished their season in high as Champions of England and Europe with super dramatic fashion, i figure what can be a better moment to put the aStore to my blog as its traffic reach the all time high from Manchester United fans all around the internet. Before i integrate the store, it was a standalone site which look like this:
Now, it’s integrated with my blog and look like this. Much cooler aight?
If you find this tutorial helps you, please consider donating 
This really helped me…thanks a lot! Anybody reading might need to know to set that height Amazon gives you from 4000 to about 1000 to display nicely.
Thanks again!
Hi Jen, thanks for stopping by.
Glad if i could help.
Cheers.
This helps a little the prpblem I have is the template. What template did you use.
Hi Buck,
I use Astore’s default template and tweak it using the CSS custom feature, where you can edit and tweak your Astore to match your website’s look.
ok, ive integrated my amazon astore into my site at http://www.1stopgeekshop.com/store/ but i cant figure out how to proxy the store for improved seo… any ideas? i hate using iframes due to its search engine limitations…
Hey 1stopgeek, thanks for stopping by.
1. Your store has moved here ya?
2. I am not sure about optimizing the seo for your embeded astore, perhaps this google seach can help.
I’ll look up for something relate to your problem and update this post if i can.
[...] How to Integrate Amazon aStore to Wordpress Page | Robin Malau Dot Com – Rockstar now Geek Sell crap with your own good looks (tags: amazon affiliate astore Blog tips wordpress template) [...]
Hi
Thanks for sharing great information.
I have added astore to my wordpress blog
http://buycameraaccessories.com/?page_id=6
But how i can set the proper page layout to bring astore to center or from left to right.
Any help appreciated.
Thanks
Hi Jimmy, try this. Hope it helps.
Thanks Robin, now store showing proper, also i think previously templae also have some problem.
Jimmy
Your store looks brilliant Jimmy, good luck with the business!
Absolutely great post. I have been looking for a way to do this seamlessly. Thanks! –Richard
Hi there, thanks alot for this tutorial but i am facing a problem, not so much with what you have wrote but with my understanding.
I have followed all the steps up and till:
Finish? Save it and FTP the store.php file to your template folder.
3. Now find this (or by the likes):
At this point what are we editing, as you have already said to upload and finish that current file, so where do we need to find the file for this part of the guide? Also where abouts do we actually add the .css part of the code in the stylesheet, does it make an impact if we place the code at the start or the end of the stylesheet.css. I would appreciate your help. thanks again
Hi As,
First you’ll need to copy your page.php file and save it as store.php (or whatever fit your liking). The file that we’re talking about editing is the new file, which is store.php.
On css styling, it doesn’t matter if you put it at the start or end style.css file.
Hope it helps.
Hmmm thanks for the reply but i am still facing issues with the store, i cant seem to figure this out even though i followed everything you mentioned correctly. There seems to be something going on and i can assure you i have followed this exactly.
Hi As,
Since it might not work on certain themes, i am not sure if i can help you more.
However, would you mind give me your site link? I’ll see what i can do…
Ok i have played about with it but to no avail, im pretty certain that it must be something do with my excellent theme lol, theres just alot of coding in the css file, im still learning this stuff so im not 100% on what coding i need to fix in amazon. http://www.2012-media.com thanks again Robin
Just a word of advice in regards to this part of the tutorial:
Finish? Save it and FTP the store.php file to your template folder.
3. Now find this (or by the likes):
Its just confusing as it sounds like you implying to finish with this particular file to move on to something else. Maybe though im just acting dumb lol
As,
Try this:
1. Copy this file, name it as store.php and ftp it to your theme folder at yourdomain.com/wp-content/theme/yourthemefolder.
2. Add this codes somewhere in your stylesheet.css:
3. Now create a new Page and name it store, embed your Astore there. Then expand your ‘Attribute’ at the right side of page editor. Select the ‘Store’ template from the drop down Template.
4. Publish your store page and DONE.
It works in my demo server, hope it works on your site too.
Woot woot, Robin Malau rocks thanks dude, i really am so grateful seriously thanks i can show how thankful i am for your time and efforts. I truly believe in the karmaloop, and hopefully something good is coming your way man. they say that if someone gives you something of value (which you have), then i should return something more of value, i have some excellent books on wealth free for download at http://www.2012-media.com, please take a look man. Wishing you all the success thanks again
My pleasure…
Hey Robin, i know this might sound a little cheeky to ask for more help, its just that im scared to play around with my site too much, as i dont want to have to go through the whole installion of wordpress again. I already done this 7 times when i first started to get the hang of things. Maybe some guidance would be useful, i just want to add stuff to my site, like maybe a bottom banner which displays products from my store, and maybe a search bar like yours, i would also like to space this out to use the whole width of the page, if this was just basic html i would have no problems, but for insance the javascript for the astore widget is:
Obviously the wordpress page is only a page, so how do i insert this code, so its customisable. I can only clearly post this either above the iframe link to my store or below, then im stuck with the banner being all the way on the left. I dont expect you to do this for me but where would i find info like this as i dont know where to look. thanks again pal
hi Robin,
i used this page quite a lot a while ago when i was setting up my amazon astore http://www.londonerseye.com/shop thanks for putting this tutorial up sure its helped a lot of people out!
also it kinda started my off on figuring out templates which i have now been able to use in other parts of my site so thanks for that too!
Excellent post! This is what I have been looking for. Not even for an Amazon site actually, put I have a wordpress site that I wanted to add a program called photopost into cleanly so that it sat right inside of the wordpress and looked like it belonged.
I used the same method, but just added my iframe stuff manually and presto! Just took a little tweaking but it looks great now.
Brilliant! Thank you!
hi ….
can you help me ???
how to modify php n my sql ??
thank’s
By: Bad’s
Thanks for your guide.
I did as your instrution and now I have “wedding shop” in my blog. Very, very nice!
http://uniqueweddingtips.com/wedding-shop
Thanks for your guide.
I did as your instrution and now I have “wedding shop” in my blog. Very, very nice!
Thanks and best regards
Thank you SO much. I have been trying forever to add a store to my site!
I was just wondering does this step work only with wordpress and blogs.
I have a website Can I do this steps using komposer.
I already have astore on my website navbar, but when I click the store button. all I see is half of the store page.
I wan my store to be like Manchester United Blog .
thank you in advance for any help.
Thanks, this is a brilliant tutorial, exactly what I’ve been looking for.
The only problem I have now is altering the width of the column that the astore appears in. Throughout the rest of my site I have a middle column set at 510px and two sidebars. On my astore page the column remains at 510px which is too slim. When I alter it to 980px in the stylesheet it looks perfect but the rest of my site goes all to pot.
I’d appreciate your advice on how I can alter the stylesheet to purely change the column width on the astore page without affecting the other pages.
Thanks a lot.
Hi Kirsteen, the solution is in the “Create a new Custom Page for your aStore” paragraph.
Hope it helps.
Thanks Robin, I solved it by following these instructions:
I made a new style.css file called ’store_style.css’ and then just after this line in the header.php file within the theme folder…
******************************************************************
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
******************************************************************
insert this snippet (adjusting for each page template that you have)
*******************************************************************
<link rel=”stylesheet” type=”text/css” href=”/store_style.css” />
****************
Glad to hear you solved the problem Kirsteen, cheers!
Iam newbie..Is this step can work at free domain or hosting..? Such co.cc or blogger..many thanks..
Hi Demoon, it works in .co.cc or any other free domains as long as you host your own Wordpress installation. I reckon that embedding aStore could work also in Blogger, if you find a way to delete the template’s sidebar (to get a full width aStore page) then link to it from your blog’s main page.
Robin, I love the astore integration on your site. It works beautifully and I have been trying to replicate that on our site. I downloaded your sample files and made the edits, but can’t seem to figure out how to get rid of the horizontal scroll on the product details page
http://www.eye.fi/nikon-wireless/buy-an-eye-fi-card/
Thanks,
Randhir
Hi Randhir, looks good from here. I don’t see any horizontal scroll in your site?
Robin
Which file is being edited in Point3 ? I have checked the 3 .css files in my theme but can’t find the
Steve
PS Have you also posted this article as Villa on this site http://tinyurl.com/csf9xc or is that someone who has borrowed your work ?
Hello Steve, i didn’t post that. Nevermind, as long as it’s helpful for people, then it’s ok.
Pt. 3 is in the new store.php file, hope it works for you
Thanks
Am making some progress, just need a few (hundred) tweaks
http://www.lovelycolour.com/?page_id=254
Shame the other guy didn’t give you the credit
By the way your M-U red page is showing an error on front page, sent it to you using the feedback form
Steve
Thanks for the head up!
Thanks for the howto.. The integration looks great.
Robin,
Thanks for the great tutorial! I was able to get my store setup in no time. It helps to become familiar with Wordpress templates for pages.
http://butyoureagirl.com/shop/
Hi Adria, glad this works for you. Your shop look great!!
By the way, i just followed you in Twitter, but i think you forgot to add the complete url in your Twitter & YouTube account links in the sidebar
Robin,
Hey thanks!
You know how you talk on the phone to someone and you can no longer read the instructions on the screen? That’s what happened on the sidebar, lol!
I’m using the Wordpress plugin, Social Links Sidebar and for some items it has me paste the entire social networking address yet for other, it only wants the username.
No more development while talking on the phone!
Adria
[...] to Robin for the awesome tutorial on how to embed my Amazon store inside a Wordpress page template. Even though I know how to create page templates, it was nice to read the comments, follow along [...]
I recently updated my wordpress blog at http://www.kiddingabout.com using the ‘thestars’ theme (free which is good!), I tweaked the CSS and code a bit to allow categories to be linked to from the top navigation. I integrated my aStore in an iFrame on the pages and also put in some adsense blocks for a bit of extra income! Would love feedback on it!
I appreciate the help on this blog post; however, I needed to take a few more steps. Here is what I did for the benefit of others.
In store.php, I changed to
Then I went to my style.css in my WordPress Editor. I copied all my #content and everything related below and pasted it right below. In the newly pasted area, I changed all the #content to #store. This allowed me to widen my posting area, and fit my aStore into my page.
See my aStore here: http://bit.ly/KKaVz
Thanks!
@purifyinggrace
Your shop looks great!
Thanks for this great tutorial! =)
I had the same problem with that of Jimmy and Kirsteen and it took me about a day to solve it. It turned out that the solution is just really simple.
Here’s what I did:
In style.css, I changed width into 1750px and I changed padding into padding-left at 80px to bring it to center.
Thanks I just applied it .
[...] more: How to Integrate Amazon aStore to Wordpress Page | Robin Malau Dot Com Comments0 Leave a Reply Click here to cancel [...]
Great post.
I now have my aStore integrated at http://www.hungryitalian.com
Question – Is there any way to make the iFrame height dynamic so it resizes with the amazon source height?
Thanks,
J.D.
thanks robin, i will try to follow your instructions here, and launch the astore.
this really awesome article .. thanks again
wow man, this is exACTly what i was looking for. totally pumped to integrate my amazon store into my wp blog!
Hi thanks for all the great advice, I am a complete Newbie and HTML and CSS terrify me, I am working with the Flexibility scheme on my website and trying to get the store inside the width of the blog is proving impossible, my support desk have said I should leave it as it is but I think it could look better having seen yours. Can you help me at all please?
Joani
That’s a dead on How-to! Thanks for the help!
Thanks a lot. Finding the ability to remove the sidebars on the store was great as I use google ads as well and didn’t want them displayed in the Amazon store. Once setup it’s genius though. Just add products via your Amazon account and your storefront automatically updates as well. Thanks a lot!
Glad i can help, Scott! Cheers
Fantastic post, really really helpful, thanks Robin. I’m just customising a wordpress template for a friend and had been stuck for a while til I found this. Nice one.
Not a fan of Man U though…. hmmmm.
All the best.
Well, at least Man Utd fan is helping no fan, FTW!
Cheers!