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 embedding 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/affialiateid-20" width="90%" height="1000" frameborder="0" scrolling="yes"></iframe> Replace above line with your own Amazon aStore link. 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.