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.

10 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.

  4. Posted August 24, 2014 at 4:46 am | Permalink

    Remarkable! Its truly amazing paragraph, I have got much clear idea concerning from this paragraph.

  5. Posted April 24, 2015 at 4:13 pm | Permalink

    I do believe you are not incorrect, having a new site
    a style that is responsive will only put in a tiny amount of charge.
    ‘s guide

  6. Posted July 16, 2016 at 11:15 am | Permalink

    Hi colleagues, its fantastic article regarding educationand completely explained,
    keep it up all the time.

    Here is my blog – NealDAmigo

  7. Posted July 18, 2016 at 12:01 am | Permalink

    I see you don’t monetize your page,i read interesting article how to
    earn some additional cash and increase traffic using one simple method, just search in google for:
    Twardziel advices

  8. Posted July 22, 2016 at 8:52 am | Permalink

    This article will help the internet viewers for establishing new web site or even a weblog from commence to end.

    my weblog … TedKVirrey

  9. Posted July 23, 2016 at 1:37 pm | Permalink

    Thank you for the auspicious writeup. It the truth is was actually a amusement account it.
    Look advanced to more added agreeable by you! However, how can we communicate?

    Here is my blog post JaredXUehara

  10. Posted July 23, 2016 at 2:40 pm | Permalink

    I will immediately grab your rss feed as I can not find your e-mail subscription link or newsletter service. Do you have any? Please let me know in order that I could subscribe. Thanks.

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=""> <s> <strike> <strong>

*
*