Using Custom CSS Styles With Amazon Web Store

I have been slacking on my posts, but my second son was just born, I bought a house and I am working on 3 different teams plus other initiatives at my day job so hopefully you will excuse me, as I have myself. This is something I did awhile ago, but actually took some problem solving so I don’t want to lose the code. My wife had some interest in doing some e-commerce stuff, and so I set her up with an Amazon Web Store. Overall the integrated experience is pretty cool, although as far as really flexible templating goes they have some work to do. I simply wanted to be able to use a custom CSS stylesheet to apply the style, and this is how I accomplished that.

The problem is that you can choose only one template when you start and that cannot be changed, there is no way to specify a custom CSS file and a great deal of the styling is applied with inline style attributes. However, you do have the ability to change Site Wide Properties and add custom HTML to the HEAD tag. The following technique could be used for any site where you have access to inject custom HTML into the HEAD tag, such as many content management, blog or e-commerce tools.

Be warned however that users must have JavaScript enabled for this technique to work well. This is the code that you can cut and paste in for a cross-browser (tested on latest version of IE and FF) clean slate for styling:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery("html").css("display", "none");
jQuery("head link").remove();
jQuery("head style").remove();
jQuery(function()
{
jQuery("body style").remove();
jQuery("*[style]").removeAttr("style");
jQuery("*[width]").not("img").removeAttr("width");
jQuery("html").css("display", null);
});
</script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

The result of using this code is that when each page is initially loading, all content will be hidden. This is to avoid seeing the page rendering going on. Depending on the browser, connection speed and machine power you may otherwise see the initial stylesheet being applied, then removed, and the new reset CSS being applied. That can look very ugly to a user. Once all of the files are cached, the file load time should be quick and any blank screen should only be visible for a moment. Once everything is applied, this will leave the page with a vanilla, consistent but unformatted layout. The idea is you would insert one or more lines following this code referencing your custom CSS.

The functionality is quite simple:

  1. Hide all of the HTML: jQuery("html").css("display", "none");
  2. Remove all references to stylesheets (this could be made more specific if you have other link types): jQuery("head link").remove();
  3. Remove all inline style blocks: jQuery("head style").remove();
  4. Schedule a set of operations to run on page load (the rest of the script operations): jQuery(function()
  5. Remove any inline style blocks in the body: jQuery("body style").remove();
  6. Remove all style attributes, from all elements that have one: jQuery("*[style]").removeAttr("style");
  7. Remove all widths from elements that are not images (this is AWS specific): jQuery("*[width]").not("img").removeAttr("width");
  8. Show all of the HTML: jQuery("html").css("display", null);

This technique uses both jQuery, the excellent cross-browser JavaScript library, and YUI: Reset CSS, a stylesheet made to make the rendering of HTML elements consistent across browsers. Both of them are highly recommended for any web development project where you want to be highly productive and provide all of your users a great browsing experience. You can find out more information about jQuery and YUI at their respective homes on the web.

This entry was posted in Development, HTML, Web and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Posted June 1, 2010 at 11:04 pm | Permalink

    Thanks for this article. I am considering Amazon webstore for a project. Do these custom styles apply to the checkout pages, too? From what I have seen, many of the webstores use a standard checkout screen that seems to only allow for a logo, much like PayPal checkout. Is there a way around this? The only site I’ve seen that Amazon claims is a webstore that doesn’t to this is https://shop.samsonite.com. Do you know if doing something like this is only a custom/premium option? Thanks for your help. -Chris

  2. Posted June 2, 2010 at 8:56 am | Permalink

    I am not sure about this, and my wife has temporarily suspended her Web Store account so I can’t check. This method should work for any page that is customizable through the Templates feature Amazon Web Store provides. If it is not in there, then you might have to look into other options. Some sites consider this a “security” feature and so they may intentionally be preventing people from customizing the checkout process. Good luck!

  3. Sal
    Posted December 22, 2012 at 7:49 pm | Permalink

    I Like this post, I have a question, I have a javascript to cycle images. http://jsfiddle.net/Kz6Gk/26/
    I belive I have to add this like CSS on my product page, but How I’m gona point to the images folder if I want to display the all the thumbnil of each product item on mouseover? let say I have 10 products listed with icons, and whenever I mouseover on each it display all the images, I have on QuickView but it display the images in the popup window that I don’t want.
    -Thank You.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>