Magento 1.9 Theme - Madison Island

New Features in the Magento CE 1.9 Responsive Theme

We’ve been waiting a long time for an up-to-date responsive Magento theme to come as standard with Magento CE and now that time has finally arrived.

My colleague Adam has already written an article on how to develop new Magento themes using the RWD package so if you want the in’s and out’s of how to start coding up your new theme using Sass I’d recommend following that link.

The following post is simply a collection of new theme elements that have appeared within the new RWD (responsive web design) package. I’ve installed the brand new sample data – “Madison Island” – (no more ottoman :/) within a localhost version of Magento for this exercise.

The main areas we are covering are:


As already stated, this new theme is responsive. It has been designed to show the most appropriate data to the customer across multiple devices and screen sizes.

To provide this experience, the new theme uses media query break-points in order to change the styles of some elements on the page – allowing them to slot together and re-order themselves to squeeze into/expand out to the limits of different-size containers.

Media Queries

Within the new RWD package there are a number of Media Queries being used. From a casual glance through both stylesheets (styles and madisonisland) we can see at least 5 common breakpoints (taken from skin/frontend/rwd/default/scss/_var.scss):

  • $bp-xsmall: 479px;
  • $bp-small: 599px;
  • $bp-medium: 770px;
  • $bp-large: 979px;
  • $bp-xlarge: 1199px;

There are also a number of other breakpoints used within the main ‘styles’ stylesheet – leading toward the opinion that certain breakpoints were introduced in order to repair the layout when the screen-size caused the layout to break – rather than designing the website to common screen-sizes (more info on that here).

Within ‘styles’ there is also a media query to handle retina-enabled devices where the pixel ratio is double that of a typical non-retina screen. This allows larger images to be provided in order to maintain super-sharp edges.

New Header/Menu Structure

The new theme design has dramatically re-structured the head area – particularly the Account, Cart and Main Navigation elements.

Account menu

The account menu has been condensed into a drop-down box that only appears once the customer clicks on the Account link. This then provides the user with the majority of their “my account” actions- rather than having to display each individually.

This is achieved through using custom jQuery that you can find (along with lots of other handy functions) within skin/frontend/rwd/default/js/app.js.

Cart Menu

The cart menu has also been condensed into a pull-down tab with new functionality to allow the adjustment of quantities – this is actually a really nice feature that we’d recommend using in your own custom themes. You can even adjust quantities through this section.

Main Navigation

The main navigation has had a bit of a facelift in this new theme. Using a different type of drop-down menu plugin and some new styles it certainly looks more up to date than the old menu. Notice the new menu item at the top of each sub-menu “View All X” – just another link to take you to the parent category.

Mobile Appearance

On a mobile the header section is compressed into 4 separate tabs, by click on each heading the appropriate content is displayed directly below.


Homepage Slider

The new RWD theme comes complete with a jQuery slider – using jQuery cycle. You can find the code where the slider is initialized within skin>frontend>rwd>default>js>slideshow.js and it looks like this:

$j(document).ready(function () {

    // ==============================================
    // UI Pattern - Slideshow
    // ==============================================

    $j('.slideshow-container .slideshow')
            slides: '> li',
            pager: '.slideshow-pager',
            pagerTemplate: '<span class="pager-box"></span>',
            speed: 600,
            pauseOnHover: true,
            swipe: true,
            prev: '.slideshow-prev',
            next: '.slideshow-next',
            fx: 'scrollHorz'

From the looks of it – as long as you have this javascript file included on each of your pages you should simply be able to add an HTML list element with images and a slider should magically appear (taken from the theme):

<div class="slideshow-container">
	<ul class="slideshow">
		<li><a href="linkhere"><img src="imagehere" alt="" /></a></li>
		<li><a href="linkhere"><img src="imagehere" alt="" /></a></li>
<div class="slideshow-pager">&nbsp;</div>
<span class="slideshow-prev">&nbsp;</span> <span class="slideshow-next">&nbsp;</span></div>

Obviously as this is a responsive theme you will find that the slider itself shrinks down to match the screen-size.

Category Product Listings

The product list view has had a bit of a makeover – especially the product filters and grid.

Filters & Grid

Filters are now clearer and feel easier to navigate. They also respond nicely down to mobile – where they collapse themselves and appear just above the product grid in order to make the page easier to navigate on smaller screen sizes.

The grid hasn’t been drastically changed but there are a couple of nice icons now for switching between grid/list views.


Product View Page

The actual ‘product view’ page has undergone quite a few changes in this new theme – most notable image zoom, product reviews and social links.

Image Zoom

The default image-zoom feature is very similar to some paid extensions that are available. There have always been ways and means to incorporate open-source jquery image zoom plugins into Magento but now this has been integrated as standard.

Another great feature that has desperately required updating has been the product gallery images. Typically you’d need to click on each product image to bring a pop-up full-size version of the thumbnail. Now though, the new media gallery will swap out the featured image and activate the product zoom feature on this swapped image. Very handy!


Social Icons

Not the most exciting implementation of social links I have ever seen but the idea is there. It would be much better if these simple click+share buttons were transformed into smaller pop-up windows with pre-configured wording for the user to share (such as hashtags etc). As it is, we can only share the product name and link.

Product Reviews

Another really useful change here is the inclusion of the actual product reviews on the product page itself. In the past we used to see the review text only available on a separate page – this is vital content that could be used to help improve the SEO of our actual product page.

The new RWD theme allows us to view the reviews within a tab at the bottom of the page. The only problem however is that the review page for this product still exists – and therefore the review exists in two places. If we were to go ahead and implement on-page reviews like this we should ensure that our robots.txt file is disallowing our /review/product pages.

Shopping Cart Page

The shopping cart has been condensed in order to provide more information to the customer. With a 2-column layout as standard the customer can now see their shopping basket at the same time as their order totals – rather than having to scroll down to see the totals information. Such a small tweak but you’d be surprised how much of an impact this can make.

There are also a few little touches with regards to the cart update boxes – in order to keep things condensed the update button only appears when clicking on the qty box for any given item.



Essentially we have a new theme here, one that is responsive and incorporates quite a few changes that will come as a welcome reprieve for many designers.

Depending on how much we wish to transfer to our own bespoke theme we could possible save hours of development time in just performing the small tweaks that this theme seems to do so well.

Let me know your own thoughts on this theme or even show how you have adapted the RWD theme to make it even better.

  • Brad

    What about the new products section on the homepage? this seems to be quite cool but I can’t seem to see the code for it anywhere? when logging into there demo store it displays it may be worth you mentioning that on here?

    • Robert Kent

      Hi Brad, true – they’re using layout XML to generate the new products section within the CMS Pages area of the admin – inside the homepage CMS page and within Design > Layout Update XML




      • Ismail

        Hello, do you know how to display special and bestseller product?

        • Maxime

          Ismail you can do this :

          1/ copy Mage/Catalog/Block/Product/New.php into local/Mage/Catalog/Block/

          2/ rename it to Bestseller.php

          3/ change the _getProductCollection method in this way
          function _getProductCollection()



          $collection = Mage::getResourceModel(‘reports/product_collection’);
          $collection = $this->_addProductAttributesAndPrices($collection)
          ->setPageSize(6); // number of product to display

          return $collection;


          4/ make your own phtml file e.g you can duplicate new.phtml file and rename it in bestseller.phtml

          Now, in your layout XML update , you have to put this :




          NOTICE : If you have used the same part of code for new product, just copy the […] segment in the […], present in you mayout update.

          Hope this help.

          • Ismail

            Thansk for help, im trying this but don’t work

          • Maxime

            Here is the content of my method in app/code/local/Mage/Catalog/Block/bestseller.php

            protected function _getProductCollection()
            $todayStartOfDayDate = Mage::app()->getLocale()->date()

            $todayEndOfDayDate = Mage::app()->getLocale()->date()

            We can get the entire collection of bestseller here :

            $collection = Mage::getResourceModel(‘reports/product_collection’);
            $collection = $this->_addProductAttributesAndPrices($collection)

            return $collection;

            I have just copied the “new.phtml” (app/design/frontend/base/default/new.phtml) file in app/design/frontend/{Name}/{Theme}/catalog/product/bestseller.phtml
            and modified the line 29 (for me // after some changes) __(‘Here put what you want’) ?>

            then, in my CMS page, i have in XML Layout update :










            I have duplicate this also for products in promotion.

            This works fine for me…

          • Ismail

            I think somethings is wrong

      • Francesco De Donato

        OK for the XML, but which is the HTML stub to put inside home page to show new products like in the sample?

        • Robert Kent

          Based on the above it should simply be getChildHtml(‘’); ?>

          • codice

            You can also load the block like this in a CMS page {{block type=”catalog/product_new” name=”” template=”catalog/product/new.phtml” }}. Muchas gracias for the detailed article btw.

  • john

    Did you found a solution?

  • rakesh

    hi i am using the rwd new theme of magento. But i am not able to change the currency to INR it is taking default Doller. Can any one give me the solution.

    • James

      Hi, You need to go into the default store and set the currency to INR and that will then change the currency in your main store.

      I hope this helps

  • alaldin


  • alaldin

    Does anyone know how to remove the View All X link from the top menu? I want to display some cms pages that do not have any products in them, any help would be much appreciated

    • itactica

      “View All X” link comes from app/design/frontend/rwd/default/template/page/html/topmenu/renderer.phtml (lines 64-68)

  • sam
  • Huy

    How can I change backgroup image default theme 1.9?

  • santosh

    How can I remove white backgroup product image default theme 1.9?

  • Zuby

    Any one can help how to change account tab from header Drop down to seprate menu links in welcome area

  • alaldin

    does any one know how to change the font size of the cart total and product description in rwd template

  • Yabo

    I can’t get the slider to work. I use the same HTML. It just shows the the image and the link. I tried it on a new install. I didn’t edit the CSS or the Js. I even tried copying the HTML code straight from the sample site, and it gave the same result.

    • Robert Kent

      Hi Yabo, Double check your console errors to see if you’re getting any conflicts with your javascript when trying to replicate the slider on a new page

  • stinte

    my products page ; add to cart and size options; Besides the pictures will not come out under

  • Alyssa

    Thank you so much! your post really save my day especially on the built in slider.

  • amar

    hello sir , in madison island theme there is no validation at checkout page while filling the details . so plz tell me how to do that my another problem is that when i add any thing on homepage it looks good on my desktop. but on mobile it looks even worse . so plz help.

  • Ismail

    Hi, is it possible to resize slideshow?
    Default is whidth 100% and height 100%.
    I want to make height 50%

  • karthikphp

    In Slider carousel-visible is not working properly when i used as product slider?

  • Mark T Porter

    Hello, 2 questions: 1, for the RWD default template, is there a WordPress template that matches? 2. Where would I edit the size of the slideshow image default. Seems to be a default size of about 868px x 579px.

  • Ismail


    I have a problem with currency on products home page, when i change currency it not change

    can you help me pls

  • microTech

    I’m new to magento 1.9,my front page list view of product image in blur,i can’t find any solution.Thanks in advance

    • ktbgreat .

      Hi there, Just wondering if anybody found a solution for this? Thanks

    • IDontThinkSo

      Any fix? How can I reduce the overall display size of Madison Island? Everything is HUGE and make the theme look cheap. I selected to have new products display on the home page and they images are HUGE and blurred. I think I remember a setting that was set to (3) – maybe if I set it to display (6+)? Can’t remember, but I saw it when I was trying to get something to display on the home page, changed it to 6 and then changed it back, not knowing exactly what it did.

  • Alok Mishra

    Hi guys , how to add third parti product API magento 1.9

  • Ravi Saini

    Hello, RWD theme not working in Responsinator.showing only white screen.
    Thanks in advance

  • dade

    where to download Madison island

  • Rawi Rai

    Hi is there any more fx for slider show beside srollHorz?

  • Peter

    I have a question about the footer menus. In Footer Links SM can I change the names and addresses in CONNECT WITH US.

    But how can I change the names in COMPANY?

  • satish sojitra

    From where to download sample data for “Madison Island” ??

  • Ashish Dhorajiya

    HI Guys, I used this theme and customized as per my designs, Now what happned it automatically restored its defaults files like header, footer and many other failed which I set up from magneto backed > System > configuration > design. So how can i stop it. This happned 2nd time.

  • CannyCookie

    Has anyone found a way to setup a product grid slider using the RWD template? It’s proving very difficult to use the Magento CSS which very cleverly calculates the product grid width based on the container size but means that we can’t then put x items in a carousel which will have a container size bigger than the page. It’s a tricky problem to solve, not sure its possible using the default rwd classes products-grid products-grid–max-x-cols.