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

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.

  • 62 Users Found This Useful
Was this answer helpful?

Related Articles

How to upgrade Magento 1.3 to 1.4.1.1

The Magento 1.3 to 1.4.1.1 upgrade is quite complex, as there are many changes to the database...

How do I make my Magento site temporarily unavailable (put into maintenance mode)?

There may be times when you need to perform an upgrade and don't want your website to be accessed...

How to disable compilation in Magento

In general, Create Hosting customers shouldn't need compilation enabled, since our Magento...

How to fix broken or slow Sales Order Address editing via Magento Admin

We recently came upon an issue in a Magento 1.5* instance where any attempt to edit the customer...

How to report an issue / bug.

We can't fix a problem that we can't replicate so we need as much information as possible in...