WordPress Techniques: Add an AStore to your site: It’s quick and easy

I’ve been an affiliate of Amazon for quite some time, as some of you will know. There are a number of tools on the market for integrating Amazon products and data into your site. And there are quite a few plugins for WordPress, too, that do the same thing.

But for various reasons, I don’t like to install plugins that do things that can be done otherwise without a plugin. I feel it slows the installation of WordPress down. There are quite a few store type applications and plugins, too.

What is Amazon Astore?

aStore is an Amazon.com product which allows website owners to create an online store on their site without programming skills. Pages from the store are created by using configuration pages to create, edit and customize the content and design.

Website owners choose from the products on Amazon’s store and they can earn referral fees on the products purchased by their visitors with commissions ranging from 4% to 10% of the product price.

So, sign up for an account at Amazon, then once approved, sign on and click on the top aStore button on the top of the screen. You’ll be taken to a simple list of your aStores. (You won’t have any yet).

Building and stocking your store

Click on “Add an aStore“, then choose or add your affiliate id.

astore login

Once you’re there you can figure things out: Click ‘Add a category page’, set your aStore settings. Then build your store. You can take a look at my Eee PC Store setup. The structure is flexible, editable and updateable. Once you’ve set up your store on your site, you don’t have to edit anything on your blog at all. The actual store set up is handled entirely here.

asus eee pc store

You can also alter the page structure on the left, as well as the categories and description on the right. Adding products is also particularly easy and can be done in one of three ways: by clicking on an image, adding a list (for large stores), and searching in the product box. You’ll only see these products when you click “Add products.”

Designing your store

Once you’ve built and stocked your store, you can now design and decorate it! Click on Continue.

decorate your astore

Since you’re integrating your aStore with your wordpress installation, you’ll need to try and match the store with the colors of your wordpress theme. If you’re not sure what colors to choose, use Ades ColorPicker (it’s free!). When you’re happy, name your store, and click continue. You’ll be offered sidebar options as well that you can alter as you need. I don’t usually place my Amazon Wishlist on any site, but I occasionally use ‘listmania’, ‘similar items’, ‘accessories’ as well as ‘editorial reviews’.

Once done, click ‘finish and get link’. You’ll see three options on the next page. I always choose the second, since I don’t want to create a standalone site, and I would like to embed the store ON my site.

Usually the code for this will look like this

<iframe src=”http://astore.amazon.com/amaffiliateid-20″ width=”90%” height=”4000″ frameborder=”0″ scrolling=”no”></iframe>

You can change the width setting, the height setting and the scrolling. I don’t usually change the first setting. But I do edit the height to about 1200 or so because it creates a lot of blank space if you are not using customer reviews. Frameborder as 0 means you won’t always see the edges, and creates a sense of seamless integration. I would suggest setting scrolling to ‘auto’, though just in case you get the longer reviews.

You can experiment with these settings, but you have to edit the embedded page, not the aStore page! Remember that!

Setting the foundations

If you don’t get the color scheme quite right, don’t worry. Once you’ve embedded the store, you can simply edit the color scheme in Amazon. Go to your WordPress install, create a blank page for your astore, and (if your theme has the options) choose a page WITHOUT a sidebar since you cannot really change the width of your aStore much. If your current theme doesn’t have a page without a sidebar option, you’ll need to edit your theme and create a new template for this. If you’ve never edited your theme before, this step may be the most difficult.

Create a page without sidebar template

Get your page template for your current theme. Save the file with a new name (e.g. page-no-sidebar.php). Then open the new file in your text editor. Remove the line <?php get_sidebar(); ?> from the bottom of the page. Save it. Upload it to your theme directory.

Embedding your store

Login to wordpress, and create a new page. When you do, don’t forget to choose the appropriate page template which is under ‘page attributes’ in a drop down menu. Give the page a title (‘store’!). Use the HTML editor mode to paste the <iframe> code into the page, hit save and then view your page.

If you’re not happy, you can play with the CSS in Amazon’s aStore settings, or the actual iframe settings on your embedded page.

Why would you create an aStore page within a wordpress site? Well, it allows you to manage and setup a full site with all the extra frills you need to run a profitable affiliate site: tracking stats, proper SEO, sitemaps, articles, policies, etc.. As a barebones affiliate store, the standalone version doesn’t give you much. To see a sample of a store I set up using this method, check out the store here or on EeeBlogger.

I hope you found this summary helpful. I have skimmed over some things… if you find it erroneous, drop me a line and I’ll edit/update the text!