After over a year of “part-time” e-Commerce (read – link referrals), I think it is about time for my blog to host a bigger eshop. I have set up the Amazon aStore before as a standalone website, but have not tried embedding it in a WordPress blog, especially one (like mine) equipped with the Thesis theme (one of the best WordPress theme frameworks in the market). So let’s give it a try.
If you’re familiar with the Amazon Associates program, you can probably finish the set up within an hour, in only 6 steps (no kidding !!). First thing first, here is the plan, you first set up your own Amazon Associates account, then you will set up the aStore parameters, and finally embed the aStore in your blog.
Step 0 – Login to Amazon Associates program, click “aStore” in the top blue color menu, and then click “Add an aStore” with your Tracking ID.
Step 1 – Define product categories in your new store. In the example below, I created 4 main categories (you can create subcategories if you want to). In the right hand side, the most important field is how you would like to populate the products from Amazon to your aStore. There are 3 options, and the easiest one is the first one – “Add products by Amazon.com category”. Just search the category and add to your store. You can also add products one by one or add products from a pre-defined listmania.
Step 2 – Customize the look and feel of the store, I suggest to make all the colors (headers, background, text, links etc.) the same as your blog’s theme colors.
Step 3 – Select where to put the category and search sidebar. I picked the left hand side option as it mimics the Amazon store (even though my blog used to have sidebar on the right).
Step 4 – Get the store link by clicking the second option – i.e. get the iframe code. Copy the iframe code to the notepad for the next step. The Amazon aStore part is finished.
Step 5 – Now, start up your WordPress blog engine, login to your administrator mode, add a new “Page”, not a new blog post. Instead of using Visual editor, use the HTML editor and copy the iframe statement there. Then in the Page Attributes box, select “No Sidebars” for the Template option. Save the draft and you can preview it. If it looks ok, publish the newly created Page. Wow!! Your eshop with all the Amazon products, payment gateway and delivery logistics is now online.
Step 6 – The very last step is simply to put up your eshop page to the navigation menu of the Thesis theme. Go to Thesis Site Options, in the Navigation Menu panel, turn on the newly created Page and you can edit the display text as well (in the example, I simply edited it to “Store”).
That’s it … and here is my Amazon aStore in an hour !!
Update : Please note that WordPress.com does not allow embedding iframe in your website. So the above steps work for your self-hosting blog (i.e. download and install from WordPress.net) only.
M.Y. Lessons Learnt 