Incorporate and Integrate Amazon aStore with Wordpress Page
aStore is a new Amazon product for Amazon Associates that gives affiliates the ability to create a professional online store in just several minutes and without the need for knowledge or skills of advanced HTML programming. Best of all, Amazon aStore not only can be linked directly from your website, it also can be embedded within and integrated into your website or blog. So you can start your online business selling Amazon or its partners products and earn affiliate referral commissions without even letting your visitors leaving your website.
Amazon has provided 3 options and ways to integrate and publish Amazon aStore, i.e. link directly to your aStore as a stand-alone site, embed your aStore using an inline frame and integrate your aStore using a frameset for websites that use frame layout structure. If you own a normal HTML-based website, integration and incorporation of aStore into the website is very easy and straight forward. Just create a link directly to the aStore online store, or create a new page and insert the iframe or frame layout embeding code that provided by Amazon to the new page, then link to the new page from your main index page. However, if you’re blogging on Wordpress platform, the steps to integrate Amazon aStore with Wordpress are not so straightforward. However, aStore and Wordpress can still be integrated by using Wordpress page template, so that the aStore will appear inside the framework or layout of Wordpress, without the need of any Wordpress plugin.
To insert and embed Amazon aStore into Wordpress so that aStore is integrated with Wordpress, follow these instructions:
- Join and sign up as an Amazon.com Associates.
- Build the aStore by Amazon by following 4 simple steps, where you can select your featured Amazon products that the visitors to your online store will first see, choose which product categories and sub-categories that will display on sidebar, customize the color and design of aStore, and customize aStore sidebar by using Sidebar Widgets.
- After building and customizing the aStore, get your personal link code for aStore. Choose embed my store using an inline frame option to get the link to publish in the Wordpress page.
- Create a custom page template for Wordpress based on your existing Page template, but without the sidebar by deleting the <?php get_sidebar(); ?> line. This is because 800 pixels wide, and for most of the themes for Wordpress, aStore won’t fit within the page if there is any sidebar. As Wordpress templates are heavily aligned and positioned by using CSS DIV tags, you may need to remove DIV in CSS layout that restrict the width of the layout in your aStore page template. Generally, a aStore page template would like similarly like this (comments on template code in italic, can be safely ignored):
<?php
/*
Template Name: aStore Page
*/
?>
The above section is important so that Wordpress will identify the new theme’s php file as a Page template. You can change the template name though.<?php get_header(); ?>
In Wordpress theme’s header, there may be also DIV tag that controls the width in the Page layout. If it’s the case, the remove this line, the copy and paste the everything from Header template, and modify accordingly.<div class=”content”>
Again, this may restrict the width of layout, if so, replace it with your own DIV structure, or simply with <center></center> (which I used) or just remove the line.<iframe src=”http://astore.amazon.com/techgadgetrev-20″ width=”90%” height=”1000″ frameborder=”0″ scrolling=”yes”></iframe>
Replace above line with your own Amazon aStore link, unless you want to donate your commission to me. I personally found that the height is too big, so I reduced it and modified the scrolling to yes. If your layout is just 800 pixels, you might need to modify the width to 100% too.</div>
If you don’t use any DIV above, just remove this line too. If you use <center>, replace with </center>.<?php get_footer(); ?>
Note: You can also exclude the theme’s header and footer (basically mean empty template file just just a line of aStore affiliate link, but that defeat the purpose of integration with Wordpress.
- Upload the new template with aStore code to your Wordpress theme’s directory. So if you’re using Blogsome or Wordpress.com, you may be out of luck.
- Create a new Wordpress static Page by clicking on “Write” then “Write Page”.
- Key in any Title you like, then on the Page Template at the side, choose aStore Page (or whichever name you gave to the new template).
Then save the page. - You’re done. Your integrated Wordpress aStore page has been published.
Related Articles
- Integrate and Display Google AdSense for Search and Co-Op Custom Search Engine Results in WordPress Blog Page Template
- Paginating or Split WordPress Post or Page with NextPage in WordPress Not Working
- Integrate WordPress including Comments with bbPress Forum using bbSync
- How to Change the Frequency or Interval WordPress Auto Saves An Editing Post or Page
- How to Customize, Modify or Change WordPress Database Connection Error Page
- Adding Extra More Fields to WordPress Write/Edit Post/Page Right Column
- 3 Column Relaxation WordPress Theme comments-paged.php for Paged-Comments WordPress Plugin
- Add NoFollow Relationship to WordPress Blogroll to Increase PageRank
- Pirates of the Amazon Attacks Amazon.com
- Amazon Announces New Mobile Shopping Application For iPhone And iPod Touch (With ‘Amazon Remembers’ Feature)
Entries (RSS)
February 26th, 2009 11:45
Excellent tip. Thanks for publishing it.
February 3rd, 2009 12:36
well, i replaced the “”s and i still get a 404 message. this has taken me weeks and still no solution – it has to be the MOST frustrating thing i’ve ever tried to do with Wordpress!!
December 9th, 2008 11:34
Finally got it working, thanks!
December 9th, 2008 09:46
I’m so sorry and even embarrassed to say this, but I can’t make this work… can anyone just paste the exact code for the template we’re supposed to make to have it work? Thanks
December 8th, 2008 11:06
well ive integrated my store at http://www.1stopgeekshop.com/store/ but how do you overcome the iframe issue? search engines cant read iframes so your store wont get crawled ive heard of astoreproxy but nobody seems to know how to get a copy of it. there is no order page on the site, and the whois email bounces back… any ideas on how to seo the store once its integrated?
November 5th, 2008 12:07
This is the answer I needed! Thanks
August 11th, 2008 07:32
Hi there.
After hours of mulling over the issue, I finally got my aStore integrated into my site. One thing, though. You can set the scrolling to “auto” so that the scrollbars appear only when needed.
In addition, Amazon makes customizing various colors via the CSS for the aStore a snap.
Thanks again!
May 28th, 2008 05:59
Thank you, thank you, thank you!!! I have been trying to figure out how to do this for weeks. I learned a lot and made quite a nice store I think. Thanks again!
May 14th, 2008 09:43
Hello,
I’ve taken a look at your tutorial here for embedding my aStore into my Wordpress.org website, but I have to admit that I am a bit confused.
I’ve included my site in the website link for reference.
What I’d like to do is create a new page on my site, between the page tabs Join and Artwork called Shop.
Inside of the page Shop, I’d like to embed my aStore.
However, as you mentioned, the storefront is too wide to be adequately placed within the margins of the post area. So I am wondering how do I remove the sidebars from showing just on the Shop page while keeping them as they are on other pages of my site?
I also notice, from looking at a few blog sites listed in some of the comments, that some users have a sidebar option that shows a preview of a few of their shop items and once a user clicks on that sidebar preview, they are taken into a page on their Wordpress site without sidebars that showcases the shop entirely. This is another option I am interested in for my website.
If you can help me with this issue, I’d greatly appreciate it and any time you take out of your schedule to do so.
Warmest Regards,
Allyson N. Jason
March 12th, 2008 11:46
There are a few limitations with iframe based astores. These are listed at astoreproxy.com
and also the solution.
February 26th, 2008 22:05
Hi, thanks for this great tutorial.
Our site is live in 20 minutes
(for anyone struggling – don’t just copy the code above – you need to change the “” – otherwise your server will return a 404)
February 3rd, 2008 01:31
[...] The way to integrate Job-A-Matic in your WordPress blog is the same as how you go about integrating Amazon aStore in a WordPress page. ORMSblog has written a similar tutorial for embedding Job-A-Matic in your WordPress blog [...]
January 21st, 2008 05:08
Thanks for this article, it will help a lot of people.
Do you know a way to easily add links to blog posts that link to items in your aStore within your iframe? Does that make sense?
December 27th, 2007 07:17
[...] Incorporate and Integrate Amazon aStore with Wordpress Page » My Digital Life (tags: amazon wordpress astore embed iframe) [...]
October 11th, 2007 20:46
Thanks for the tip. I was stumped until you pointed out the need to create a new template for the page – after that it was easy. Up til that point I was having all kinds of nightmares about having to hack the existing templates…
July 17th, 2007 04:48
Thanks for the instructions I am SOOOOO happy with my store integration!
July 1st, 2007 05:18
Your instructions worked and I now have an Amazon aStore within my WordPress site at http://www.afloat.org.uk.
Thanks for the advice!
May 29th, 2007 19:06
Do you know of a blog where it’s used?
I ask because I have some problems making an iframe myself but showing a map like this http://www.tinemuller.dk/new_wordpress/another-test-map/.
I have now deleted from the code because of too many problems but would really like to have this above the map but can’t get it to functioning.
May 29th, 2007 03:47
aStore used to on this blog, but now been taken down.
May 28th, 2007 19:25
Am I blind or don’t you have this used on this Blog?
May 18th, 2007 02:51
[...] des Blogs in die Quere kommt. Die Lösung: Die Sidebar muss weg! Wie das funktioniert steht auf My Digital Life und hier auf [...]
April 23rd, 2007 00:31
Thanks, these were very easy instructions to follow: I’ve created a store about Spaina and Spanish things.
April 7th, 2007 11:48
[...] Recommends, which allows us to showcase the products we recommend. There’s a great article on My Digital Life on techniques for integrating your aStore into your [...]
April 6th, 2007 01:18
[...] and customized would appear to the visitors. To do it your selves just google around or visit MyDigitalLife. (also don’t scratch your blog’s design by following this and you need to have a little [...]
April 3rd, 2007 12:22
[...] was also able to incorporate my store (check it out). Major thanks to My Digital Life for a fab tutorial on adding the store page. I never could have done it without the [...]
April 3rd, 2007 11:58
Thank you so much for this tutorial. I would never have had the courage to try this without your guidance!
January 10th, 2007 11:45
Sorry, I’m just confused now, I’ll try again in the morning. I have enabled scroll and placed a 1 pixel border to the inline frame code so you can see here… http://wedreaming.com/?page_id=36
Thanks again for your help, I will keep at this until I understand:)
January 10th, 2007 11:17
You don’t remove div from header.php. You should remove get_header from your astore template, then copy everything from header.php and paste into astore template, and remove the div in astore template.
January 10th, 2007 11:10
I still do not know where the div is coming from.
In the shop.php there is no div code. The only div code that I see is in the header.php. When I edit the header.php to remove this, the other pages are mis-aligned.
I’m stuck.
January 10th, 2007 10:53
Once you remove get_header and copy back the code manually, left out the div i mentioned just now, then check if it works. If fit in proper once your astore align a little bit to the left, then you no need to modify the width of the page in CSS.
January 10th, 2007 10:49
I removed get_header, saved and the shop displayed pretty good, although without my header;)
I manually typed the get_header code back in and save and the right side was cut off a bit again.
I am left with editing my stylesheet code for page widths. I have tried that and was able to get it wide enough to display, but then all the other pages were mis-aligned. I will keep tinkering with it and see if I can solve this. If not, I’ll just remove the header code for the shop page and go from there.
Again, when editing the shop.php page, I do not see any div code. I do see this code in the header.php, but I have tried removing that and that produced more mis-alignments on other pages.
I’m sorry to have been a bother;) I’ll post back when (and if) I get this solved.
Thanks for taking the time with me.
Adam
January 10th, 2007 10:20
Read the post above carefully, you may need to remove get_header and copy and paste the code manually to your template, without the said div.
January 10th, 2007 10:05
I’m sorry, I’m editing the shop template page from the admin–>theme editor–>shop…..this does not show that code.
When I view source from browser, I see that code to be removed….where is that coming from?
January 10th, 2007 09:51
I check your page, you still haven’t try to remove the <div id=”page”> and </div>. If not, you may need to modify your CSS on body.
January 10th, 2007 09:31
After header is the center tag and then the inline frame astore code, then the center end tag.
January 10th, 2007 09:30
I’m sorry to keep bugging you, but I have also removed that code. This is my code minus the php tags…
php start
/*
Template Name: Shop
*/
php end
php start get_header(); php end
php start get_footer(); php end
January 10th, 2007 09:24
Seems like the width of your page is too small, try to remove <div id=”page”> and its respectively close at the bottom.
January 10th, 2007 09:13
I see I can’t post code here…whoops…
January 10th, 2007 09:13
I have removed the sidebar, this is the code in my “shop” page template…
The page is here…
http://wedreaming.com/?page_id=36
I am using the Default Kubrick theme.
January 10th, 2007 09:09
Adam, you may need to remove your sidebar.
January 10th, 2007 08:49
I just found your excellent and esy directions! Thank you! It’s working almost perfecty, but my store is a bit cut off on the right hand side. Any chance you could take a look at the page and the code?
Thanks for any help you can provide:)
Adam
January 6th, 2007 03:27
This was the easiest set of instructions I have encountered since using Wordpress. Now I will be using a-stores as much as possible. Thanx for all you do.
December 14th, 2006 23:31
I’m rebuilding my site (not yet published as I write this) and this trick came in so handy.
Thank you!
October 31st, 2006 00:16
[...] Google AdSense for Search features the ability to let web publishers to open and display search results within the website itself. In other word, the results of a user search performed in Google AdSense for Search box will appear within a frame on a page from the site, so that rather the users need not to leave the publishers’ websites and being taken to Google, while still able to search for information with Google web search. Beside, Google AdSense for Search, Google Co-op also has Custom Search Engine that can be placed and integrated, together with the search results into website, and comes with more customization options such as search refinements, ads positioning, prioritize or limit sites to include in search results, change and modify the look and feel, collaboration with users, ability to create multiple search engine, make money with AdSense, and of course, ability to integrate into existing website and blog templates. To integrate, incorporate, embed and display Google search results from Google AdSense for Search and Google Co-Op Custom Search Engine within the template and theme of WordPress blog, we use the similar steps that used to integrate and embed Amazon aStore into WordPress blog by using additional Page template. You can embed the search results code snippets on a new post if you want to display search results based on your WordPress theme’s Post template. However, as Post doesn’t allow you to select a unique custom template for a single post, you will have the same layout among all the post entries and search results. This is not advisable, as sidebar may take up a lot of space, and the theme’s Post template has contains AdSense ads itself or other customisation that will make the embedded search results appear odd. So using a new Page template is better choice, and the Google search results can be made display on WordPress itself without any need of plugin. [...]
October 14th, 2006 05:47
[...] The implementation into wordpress was extremely easy with the help of the instructions at My Digital Life. Very well done. [...]