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 
Delicious
Digg
Ember
Facebook
Feedburner
Flickr
Foursquare
Friendfeed
Google Buzz
Gowalla
Last FM
LinkedIn
Posterous
Qik
Slideshare
Stumble Upon
Tumblr
Twitter
Vimeo
YouTube
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.
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
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 .
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!
nice sharing… but this can support in Blogger, because i’m just familiar with blogger…
Hi, thanks for stopping by. Yes, it’s for WordPress not for Blogger
How can I automate it? I am interested to use some wordpress PLugin which will automatically pull the data against mY associate ID and display as Individual blog. Can i do this with your template?
Pls help!!
Hi Adnan, if i understand what you mean correctly, you want to feed a blog with data from your Amazon ID? There’s a plugin name Feedwordpress, you might want to give it a try. However, i am not sure if Amazon lets you do that.
Feedwordpress is not free at all and has restrictions.
I am not sure which restrictions bother you, but Feedwordpress is free.
Hi Robin,
Thanks again for a great tutorial. I just came across your blog and I was having the same problem as Jimmy’s, that is, how to center the Amazon store. I clicked on the link that you have given in your reply to Jimmy’s same question, but it doesn’t work. Would you be so kind to help me out on how to center the store?
Check out the website page at http://vintageladieswatches.info/store-2
Thanks a million in advance.
I am not sure what you mean. Are you embedding your aStore at your page editor?
Try to decrease your aStore width to fit your content fields.
Or,
Delete both sidebars then assign some tricks at above article on style.css & the new store.php to make a wide page, then adjust your aStore to match the new page width & length,
Hi Robin,
Thanks for the reply. I actually followed your instructions step-by-step. I removed the “” code (as I have two sidebars). However, as you can see in my link, the “welcome” note on the left and the notepage on the right, still appear. Then, in the end, I added the “.store { width:30em; }” code in the CSS stylesheet and the result was… you can see in the link. I’m not sure if I need to center the store or make it smaller than 30em. What do you think? Or, is there anything else I should do?
If it doesn’t work then there must be something else you should do. But I see your store is fine now?
Nope, it’s the same as before. Seems like it is not centered and it is cut in half…
Great tutorial very interesting I was wondering do you have a tutorial on how to integrate the store via the 3rd method which is the frame set way.
Hey this is a great tutorial. I have a couple of questions. On the section, is that on the template we were modifying? Also I seem to be having trouble with the css part of it.
Hey Mike, thanks for stopping by. Could you be more specific with your problem? I’ll see if i can help.
I am sure that a lot of others have had this but no matter what my aStore still looks like it is cut in half.
Mike, at least give me the link to your store before you say the result of this post is erroneous, not only to you, but also to others.
It works for me though.
let me check again. I haven’t published it and want to make sure that it worked before listing it.
Hi Robin!
Thank you so much for putting this tutorial out there for novices like me! I do have a small problem, however, that I was hoping you could help me out on. I followed your instructions and deleted the line of code in my store.php file about removing the sidebar).
When I go to my Store page, The left side bar is still there (the right one disappeared though..I have a left and a right) and the store is cut in half. Any suggestions? I would like to see my left sidebar go away and have the store centered.
The direct link to my store page is: http://wholesomegaycouple.com/?page_id=192
Thank you so very much!
Eric
Eric, if your theme have 2 sidebars on left and right, then you’ll need to remove not only right sidebar, but also the left.
Backup your store.php file, then find a line that contain ‘sidebar’, try to delete it then refresh your aStore page.
Hope that helps.
Hi Robin,
Thanks for your help. What fixed the problem with the store being cut in half was the html code that Amazon had me cut and paste into my post. “width=90%” I changed it to 170% and boom it worked!
Now that the store is fully displayed, I think I will keep the left sidebar to help people navigate back easier.
Thank you so much for posting this tutorial it was very helpful and you are very kind.
Love and Glitter,
Eric
Hi Robin,
So I got the store to work perfectly! Thank you again. My problem is, it looks fine in Safari and Internet Explorer but in Firefox it gets cut off. Any ideas?
Glad it works, but you still have the store too wide in Safari and Chrome. On Firefox, it is cut in half, but I am not sure what’s going on, i need to look at your theme files which is impossible at the moment.
Hi Robin
Thanks for sharing this info.I have follow your steps but now can;t increase width of astore http://bestdeals4-u.com/Blogs/store/ can you please advice me what I am doing wrong.
Thanks
Sohil
I will need to see your style.css and store.php files to be sure. But i can see your .post still at 470px, that causes your store is cut in half. You need to assign a new css class to your store page, so your embed store can be shown in full.
Hi Robin
My store.php file is same that you created
<div class="post" id="post-”>
and.CSS files look like
/* Style add-ons for the “Silver Red” color scheme
of the WordPress theme “Simple Balance” by Blogsessive */
#contentleftstore {
overflow:hidden;
width: 960px;
float:left;
padding: 0;
margin: 0;
}
/* General styles */
body {
background: #fff url(img/redorange/background.png) repeat-x;
}
a {
color: #e67006;
text-decoration: none;
}
a:hover {
color: #d90202;
}
.store {
width:120em;
}
/* Header styles */
.topLogo h1, .topLogo h2 {
color: #d90202;
}
.topLogo h1 a, .topLogo h2 a {
color: #d90202;
}
.topLogo h1 a:hover, .topLogo h2 a:hover {
color: #e67006;
}
.topLogo .blogDescription {
color: #e67006;
}
.topMenu ul li {
border-top: 5px solid #fcdaa2;
}
.topMenu ul li.current_page_item {
border-top: 5px solid #d90202;
}
.topMenu ul li a {
color: #e67006;
padding-top: 20px;
text-decoration: none;
}
.topMenu ul li a:hover {
color: #d90202;
}
.s {
border: 1px solid #f90;
}
/* Sidebars styles */
#lsidebar h2, #rsidebar h2 {
color: #666;
border-bottom: 1px solid #f90;
}
#lsidebar li.rssFeed {
background: url(img/redorange/bg-rss.gif) no-repeat;
}
.rssFeed a {
color: #fff;
}
.rssFeed a:hover {
color: #f90;
}
.rssEmail {
border: 1px solid #f90;
}
.rssForm small {
background: #fff2db;
}
.rssSubmit {
color: #e67006;
}
#wp-calendar caption {
color: #f90;
}
#wp-calendar th {
background: #eee;
}
#wp-calendar td {
background: #f5f5f5;
}
#wp-calendar a {
color: #d90202;
}
#wp-calendar a:hover {
color: #888;
}
/* Content styles */
.archiveTitle {
color: #666;
border-bottom: 1px solid #ddd;
}
.postTitle h1, .postTitle h2 {
color: #d90202;
border-bottom: 1px solid #f90;
}
.postTitle h1 a, .postTitle h2 a {
color: #d90202;
}
.postTitle h1 a:hover, .postTitle h2 a:hover {
color: #888;
}
.postContent h1 {
color: #666;
}
.postContent h2 {
color: #666;
}
.postContent h3 {
color: #666;
}
.postContent h4 {
color: #777;
}
.postContent blockquote {
background: #fff2db url(img/redorange/bg-blockquote.gif) no-repeat;
}
.postMeta a {
color: #d90202;
}
.postMeta a:hover {
color: #888;
}
/* Comments styles */
h3#respond, h3#comments, h3#trackbacks {
color: #d90202;
border-bottom: 1px solid #f90;
}
.commentAuthor a {
color: #d90202;
}
.commentAuthor a:hover {
color: #888;
}
#author, #email, #url {
border: 1px solid #bbb;
}
#comment {
border: 1px solid #bbb;
}
#submit {
background: url(img/redorange/bg-addcomment.gif) no-repeat;
color: #fff;
}
/* Footer styles */
#footer {
border-top: 1px solid #ddd;
}
Thank you so much for this helpful post! I would have such a hard time figuring this out without your help. Thanks again!
Thanks for a great tutorial. Please check my store for a similar implementation of the aStore (http://www.bluedome.biz/blog/store/)
Hi Robin, just started my blog about a month ago and did everything up to step 3 because I couldn’t figure out where to find div=post because a lot of the code was similar. But my store looks ok….I would like the width of the store + the sidebar to be the same width as my site’s header. I don’t understand how you changed the style.css. THanks!!!!
Laura, i think what you need is to define the style at your Amazon store. You can find that on your aStore admin, and change the store width to around 910px? Hope that helps.
Do you mean under “select and customize your theme” and you can click on “edit css”? What would I change if this is where I am supposed to do it? There’s a couple parts that speak of width.
Hey Robin, I think I figured it out! But now the main area and the sidebar look so far apart! I have been trying to mess with the css on the astore admin, but can’t figure out hot to make it look better. Also, I seem to have a lot of empty space when you scroll down, how can I fix that too? Thank you for your help and speedy reply!
Laura, try change the height of your store to “100%”.
hmm…I do not see any ‘heights’ with %, just listed as px amounts. ?
Find it here http://notepad.cc/fadioxa54 pass: astore. Cheers.