Get a Quote

Magento 1.9 Is Here – Introducing Their New Responsive Theme…

Share On Facebook
Share On Twitter
Share On Linkedin

Update: 6-13-14

As stated in the comments section of this blogpost there is a rendering problem with the default Magento 1.9 theme. There are potential conflicts where this responsive theme sometimes does not work on Chrome and Windows 8 operating systems and browsers. I will be updating this post accordingly as soon as we gather a useful list of conflicts. The theme is in the ‘out of the box’ form, no modifications were made to it.

As many of you know at the recent Magento Imagine Conference in Las Vegas, Magento announced the latest version of it popular eCommerce software, Magento 1.9. While you can learn more about the official release from Magento, we wanted to provide an update that we feel makes it worth keeping an eye on; the responsive theme that is included in Magento 1.9. In other words, anytime that Magento 1.9 is installed, we will not see the  generic and default Magento front end theme. With the latest release you will get a beautiful and mobile responsive theme that Magento comes with. To poke around  with Magento 1.9 you are welcome to visit the Demo store we have set up.

So, lets get into the responsiveness aspect of Magento 1.9, which is what this blog post is about.

What Is A Responsive Theme?

‘Responsive Theme’ is another way of saying a web design (theme) that is catered to mobile browsers such as your smart phones or tablets. The new theme that comes out of the box with Magento Community 1.9 allows you to serve your site to all browsers now without having to invest in a custom mobile theme. Below are a list of features that come with this new Magento 1.9 responsive theme:

Interactive Slider

Magento 1.9 Interactive Slider

Magento 1.9 Interactive Slider

On a desktop computer, the slider rotates through images automatically as well as allowing you to navigate to the next image by using your mouse. For mobile devices, you can either use the left/right arrow or swipe to the left or right in order to view the new image.

The slideshow is located in the Homepage CMS Block and allows you to replace the existing 3 images/links of the slideshow by yourself. All you would have to do is replace the path of your images and the pages they would link to. No configuration is needed at all to use the default theme slideshow.

Drown Down Menu
Below is a demonstration of what the drop down menu looks like on a desktop:

Magento 1.9 Responsive Theme Drop Down Menu

Magento 1.9 Responsive Theme Drop Down Menu

If you need help with your Magento store, call 845-656-3000 or Contact us here »

For mobile devices, you will notice a little difference:

 

Magento 1.9 Theme On a Mobile Device

Magento 1.9 Theme On a Mobile Device

Notice how on the left you see the title ‘menu’ and a series of horizontal lines? On your mobile device you would click on that and then your menu will open up and let you navigate to any part of the page, just like in the desktop version.

Mini Cart Preview

One of my favorite aspects of responsive themes is the ‘mini cart’ which allows you to either click, or hover, at the top of the page and have a drop down window display the items you have added to your cart as well as your sub total. This feature is included in this theme as you can see:

Mini cart preview on Magento 1.9

Mini cart preview on Magento 1.9

The out of the box MAgento 1.9  theme is elegant and can be used as a child theme just like any other. This will allow you to open up your store to all visitors on all devices and make sure they have a positive shopping experience without having to deal with browser conflicts.

Summary:

While Magento Community Edition 1.9 is ready for us, I do believe it is best to keep an eye on it and use it in a test environment first. With that said, if you are ready to offer a responsive theme for your visitors and are not ready to invest in buying a new 3rd party theme, give the theme from 1.9 a try and see what you think about it. Personally I am excited about it and, while we prefer the Ultimo theme here at Shero Designs, I personally am happy to see Magento take this next step forward. If you have any questions about using or upgrading to Magento 1.9, or even getting started with responsive themes on an existing site, do not hesitate to contact us.

  • Stech

    Navigation menu doesn’t work on Chrome or Firefox on Windows 8.1…anyone else having this issue?

    • sherodesigns

      Hello, we just tested the Magento 1.9 demo store and it works fine for us on all browsers. It must be a setting on you local machine. Hope this helps.

      Best,

      Gentian

      • Dan

        the menu definitely does not work in Chrome/Windows 8. Even in your demo store the menu does not pull down for some reason. I tried on many laptops with the same result.

        • sherodesigns

          Hi Guys,

          Thank you for confirming where it does not work, this is actually good to know and I can share this on the update to the article. The one thing to remember is that this is still new and will probably need some fine tuning by the developer over time. For the record, for those wondering, the demo on the article is ‘as is’ based on the install. Please feel free to let us know what other conflicts you may find. Thank you for the time.

          – Joel

      • Dan

        i think Chrome on large viewports with touch screen is where the menu doesn’t work with a hover with a mouse.

    • Kbiria

      Hi;
      I am having the same problem. It works in ie but not in Chrome and Firefox. Could you solve the problem?

      Best regards;
      Koroosh

      • Stech

        Works on my Win7 and OS machines but not on Win8. I’ve set browser and internet settings to default, disabled all extensions/accelerators, etc. still no luck. I’ve also noticed in Chrome/Firefox hovering over the product image doesn’t render the zoom effect (works in IE).

  • Kelly an

    Thank you for your summary of 1.9.
    How to add slideshow in the front page?

    • sherodesigns

      Hello,

      When you install the 1.9 version and use this default responsive theme, the home page content block includes a slider with 3 images and uses a div with the class ‘slideshow-container”‘. Within that you will see 3 images and urls to specific pages. All you would do is replace the images and urls. It is meant to work out of the box that way. I hope this helps.

      – Joel

      • esolesek

        I wish someone would post this code, since it didnt make it into my front page at all…and magernto has three sliders on their website, none of which work. Really an atrocity of a company.

        • I think you need to also install the sample data, aside from the theme itself.

          • esolesek

            I did get it all to finally work, but yes, the installation of the theme alone isn’t nearly enough, and there are also some kludges that need to be implemented to get the swatches working correctly, stuff which I can’t remember now but had to write down. Maybe they finally fixed all that in updates.

        • Mak

          paste the code in a widget or in the home page content. Replace the images with yours one.



           
             

          • bunhin

            Hi Mak,
            I want to add some caption or text in the image, how to do this just using this default magento slider. (without installing other or third party extension)
            in magento demo, text actually part of the image

            Thx,
            Bun

  • ZenMasta

    On a non mobile are the parent categories, Women/Men/Accessories etc onhover? so on windows tablet will you still not be able to see child menu unless you click/tap parent and wait for the page to load?

  • Andrei

    Hi. Do you know how to get the top navigation into the left (sidebar) column?

    I have a lot of categories and I need it on the left side.

    Changing the catalog.xml didn’t help. (maybe I didn’t do it right).

  • HLTGRP

    Call me crazy, but why did they release a default theme that doesn’t even work properly in the most common browsers and OS’s ? Nice job Magento. Being “new” really isn’t an excuse for something this big of a problem.

  • damnit

    How do you change the color of the buttons of the slider?

    • damnit

      nevermind, got it with style.css around line 8801