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.
Share and contribute or get technical support and help at My Digital Life Forums.
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
- Adding Extra More Fields to WordPress Write/Edit Post/Page Right Column
- How to Change the Frequency or Interval WordPress Auto Saves An Editing Post or Page
- Enable Gzip Compress on Wordpress with WP-Cache 2.x
- Must Have WordPress Plugins
- Download Previous or Old Version of WordPress
- WordPress 2.1.1 Critical Security Alert - Download Upgrade to 2.1.2
- Disable and Turn Off Post Revisions Tracking in WordPress 2.6 or Above
Entries (RSS)
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?