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?
If you find this tutorial helps you, please consider donating 🙂