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:
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:
For mobile devices, you will notice a little difference:
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:
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.
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.