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?
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.