Magento mobile theme FAQ

The amount of mobile devices keeps growing. Definitely, you should consider the mobile theme for your Magento store.

Should I use Magento mobile theme?

The number of mobile-connected devices exceeded the number of people on earth in the end of 2012, people use smartphones and tablets for shopping and research, and sooner or later you will face with necessity to implement mobile theme. Thankfully, it is already included into latest versions of standard Magento (all editions).

How to install?

By default Magento mobile theme is located in the app/design/frontend/default/iphone/ folder (for Community edition).

There is a great article from our friends where you can find detailed description on how to setup automatic switching using design exceptions for Magento mobile theme.

In short, you need to add an exception for mobile user agents, that's it:

exception 

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

value 

iphone

Then Magento will detect customers agent type and will show him/her appropriate store view.

How can I test this?

Surely after configuration you need to check what you did. There are several ways to do that:

  • Visit your store using iPhone/Android smartphone
  • Use user agent switcher browser extension (FireFox only)
  • Use embedded agent switcher in Google Chrome browser
  • Use Opera Mini simulator

You can view and test your mobile theme using any of these tools.

You can also validate your theme using service from W3C.

What if I want to switch to mobile theme manually, instead of automatic redirect?

If you don't need an automatic switch, the easiest way to implement manual switching is to create a separate store view in Magento and assign the mobile theme to this store view. Then you will need to insert a link to standard/mobile store view in the front-end, and customer will be able to switch between standard/mobile store views with a click.

What if I want to customize the mobile theme design?

The mobile theme can be modified the same way as any standard Magento theme.

However, there are several points you should be aware of:
- There are separate CSS for retina displays, it is at the bottom of iphone.css file of your mobile theme. So if you changed something, but then you see standard header in your iPhone, it means that you forgot to change retina styles.
- Your markup should have adaptive width to support all mobile devices.

Some known problems

There is a known problem in Magento Enterprise caused by full page cache.

Magento full page caching generate cache keys using store ID & design package (+ some other info), but it does not use theme for generation. Practically it means that Magento full page cache processor will not recognize different themes specified for the same store (but mobile theme works exactly this way). There are 2 ways to solve this issue:
- Move mobile theme to a separate package.
- Implement a fix for FPC generation.

Further reading