The m is for maus~. I do what I please. About m~, The Archives and the Lifestream RSS



Develop a custom skin for an Amazon aStore

The ins and outs of developing on top of Amazon’s Associates Program. It’s my (generally unpleasant) experience developing a skin for the aStore and a little advice for those who plan to go down that road.

What we are talking about

A few years back, amazon.com launched its Associates Program, and part of it was aStore. The principle is simple. You register as an affiliate, setup aStore with desired products (best if you use the Associates Site Stripe to add them) and categories, choose a theme and you’re off. You get a percent of every sale that originates from your store. The beauty of it is that the visitor never has to leave your site until checkout.

Trouble is their skins are… well, their skins (called themes). You risk having your store look like a thousand others. They were kind enough to let you edit the CSS of the theme. That’s it. CSS, no HTML.

And how do you make your own aStore template?

As others have proven before me, you can get pretty good results if you keep at it and hold your nerves. I’ve lost it 2 times already. This is, actually, my third attempt. On the first two tries (about 2 years and 1 year ago) the inept CSS and page structure got to me and I gave up after the first 2 hours.

Somehow, now I got to the end of it, and have my own aStore theme. As is the case with the above examples, there’s not much to it that doesn’t meet the eye (meaning looking at the source or CSS won’t reveal anything you can’t already see). Except:

The branding elements

All background images. Apply them to whatever element you like (I needed part of them on the body, others to #wrap), pad like you really mean it and that’s it.

Styling the home link

If you’re fine with text, there’s nothing to it. You have the option to insert it in the page right there in the aStore interface. If you want an image (like I did), you need to:

a#mainheadertitle {
    display:block;
    text-indent:-999em;
    width:Xpx;
    height: Ypx;
    }

#header a:hover {
    background: url(your-absolute-url-here);
    }

I actually wanted an image of text. The irony is not lost on me.

The “developed by” logo

In the aStore interface you have the option to add a link back to your site.

See it in the sidebar, below the categories’ navigation menu. As it happens, you can’t insert any HTML. So, again, a background image does just fine. Except there’s no class or id to hook it onto. So I selected it like this #searchbrowse a[target="_top"]. It’s pretty safe, since it’s the only anchor with that type of target.

The worst part of leaving it as-is is that it looks like an element of the navigation, except it takes you to another site. Not very nice.

The process

Hated it. It’s not just that it isn’t valid or semantic structure or styling. The worst of it is that is has no use for the C in CSS. Almost no cascade. It’s almost like a 5th grade monkey got this as a school assignment during the last week of the school year. So… to outsmart the monkey, think like a monkey. Err… nevermind that. Just expect a lot of annoyances.

One tip: the CSS editor has no “Save” button (WTF?!) but it does autosave when you switch tabs or go back . So do that. A lot. Much better than clicking “Go back to Color and Design” (ha!) every time you change a font-size. Though you probably already use Firebug for that kind of minor changes, right? Right?!

It’s also a good idea to have at least 2 categories and one of them paged when you begin styling so that you don’t discover weeks later that your pagination element looks like the default.

That’s it. Told you there wasn’t much to it.