Categories
Geeky internet

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:

  1. Choose products that fit your niche for super wide range Amazon products.
  2. In aStore set up wizard, don’t use the Header as it will be contrast with your blog’s default header.
  3. If your blog’s sidebar located at left side, then choose the store’s sidebar, and vice versa if its at right.
  4. It’s better to edit your store’s CSS to match the feel of your site.
  5. 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 πŸ™‚





138 replies on “How to Integrate Amazon aStore to WordPress Page”

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

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

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

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.

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.

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” />

****************

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.

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!

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

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.

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

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!

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.

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?

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.

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

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.

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;
}

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!

I cannot get it to show the FULL sidebar from my store, it only shows half of it. I have tried increasing the % of width and it still only shows half like it is still looking for the damned theme sidebar.

Here is my “page.php” that you said to edit and see if you can figure out for me please as its stressing me out

Thanks for this one, needed just a few more tips, soon i will make sure my page as well has an amazon affiliate store on it. Keep up the good work and nice site layout btw, texturised page, fancy jquery stuff, neat πŸ˜‰

I am trying to follow the instructions above in order to create a template with no sidebars. However, under my page.php there is nothing that says Where can I find this and how do I get rid of these side bars. I am trying to set up an amazon astore on my site and the sidebars are blocking it.

Than you for your help

I have followed the steps, and my store just seems to become narrower, I have two other stores with the same problems although I haven’t gone in and tried editing them yet. I wonder if perhaps I am not putting the .store in the correct area. I placed it under the #content on the style css page. I am really new to this. I have 14 pages and it is only currently showing one without the options to proceed to the other.

Thank you for any help you can give me!!
Sincerely,
Cindy

Hi, I am curious about something concerning this set-up. I am interested in placing affiliate links throughout my blog articles and elsewhere on my various pages. I want to be able to put contextual links throughout and when they pop-up with a picture, have it so people can add the item to the cart on my site rather than being taken to amazon. I don’t want an actual “Store” page – or at least I want it to not be the only option. Do you know anything about this topic? I would appreciate some advice. Thanks

Hi Robin,

Does this work with pages on blogs at WordPress.com? Note that I do not have access to a web server nor do I have the software installed. I am only using the features provided by the WordPress.com interface. I tried creating a new page, using the default Kubrick template and including the html code from the astore. When I try to view the page, I do not see the frameset. All I can see is the link to the store page.

Please can you help.

Thanks,

Monika

Robin,

Thank you for much of the advice you have given out here. I have tried to follow as much as I can but I’m stuck trying to get the store to display properly. Its cutting off 3/4 of my store.

Hope you can help

Chris

All very helpful post herein…However, if anybody is still having a hard time…Let me share my astore.php. Here it is:

************

*************

You obviously need to change the URL for your Amazon Store. If you wanna see mine, its at: http://www.allaboutcoffee.thoughtyoumayask.com/

Also and to make it a little bit more fancy…you can also link your STORE just like how you do it with your regular ads/links in your blogs. By essentially defining the link and image URL. You may see how I did it in my blog (notice the one at the right sidebar at the upper part (My Hotta Store):

http://www.allaboutcoffee.thoughtyoumayask.com/manual-brewing-methods/back-to-basics-2/

Hope it helps…

Thanks!

I have a wordpress music business site with the Thesis theme. I want to ad the astore. Is there a way to add a search that searches the entire amazon inside my site. I wanted to tailor the products in my store, but I feel like you I will lose sales because when I buy from Amazon, I usually order from multiple departments.

Hi, its great tutorials.
I just found it after I set up my amazon store but I found it long blank space below the store. I have try some script by googling, and also using your advise to set up the height with 100%, but it change nothing.
Do you have another solution to adjust the height to the store content?

Thank you so much brother

I keep reading all the tutorial info and I cannot locate where to actually create the custom page template file….Do I need to purchase the Custom Design option to access this? I’m not familiar with working with code but I am usually able to figure the techy side of things fairly well. Any help is greatly appreciated. Thanks!

First off I would like to say superb blog! I had a quick question that I’d like to ask if you do not mind. I was curious to know how you center yourself and clear your mind before writing. I have had trouble clearing my thoughts in getting my ideas out. I do take pleasure in writing however it just seems like the first 10 to 15 minutes tend to be lost simply just trying to figure out how to begin. Any suggestions or tips? Thanks!

Leave a Reply to Mike Carroll Cancel reply

Your email address will not be published. Required fields are marked *