How to activate the Mobile HTML5 theme in Magento 1.7 (for Android, Blackberry, iPhone, iPod, Windows Mobile, etc)

A A A
100%Reset

Magento 1.7 comes with a new Mobile HTML5 theme out of the box. This should be compatible with Android, iPhone, iPod, Blackberry, Palm, Windows Mobile, Safari Mobile, Opera Mini and many more.

Activating the HTML5 mobile theme is as simple as configuring an exception in the Design section of the Magento Configuration.

1. Go to: System > Configuration > Design > Current Package Name

Make sure that the Package is set to the package with your theme. If you're using a different package than the default (or enterprise if you're on that platform), then you will need to add an exception for the package. Click on "Add Exception" below the "Current Package Name".

This will display a form with a couple of fields. The "Matched Expression" field is a string you want Magento to match in the User Agent of the browser. "Value" is what you want the field value (in this case package name) to be when that expression returns true. So, if your theme isn't in the default package, you would enter default for the value (since the mobile theme is at default/iphone).

The matched expression is case sensitive. You will need a different "Matched Expression" for each platform. For example, enter the following:

iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini

2. Repeat the above in the Themes area (System > Configuration > Design > Theme), except the value field will now be iphone - the name of the theme folder.

3. Click "Save Configuration"

4. Clear your cache, and view your website from a mobile device such as an iPhone. You should now see the mobile theme, and your computer should still show the main theme.

Don't forget of course to customise the iPhone theme to suit your needs.