How to setup mobile theme in magento?

To setup mobile template, log into admin panel go to System -> Configuration -> Design.

In the Package panel, rename the Current Package name to “default”. You will to set the Current Package Name to your package name(Eg: mgstheme).

mobile_config_package

Under theme section, click on “Add Exception” below each Templates, Skin(Images /CSS), Layout, Default. This will display a form with a couple of fields.

  • The “Matched Experssion” field is a string you want Magento match in the User Agent of the browser. In orther words, if the regular expression matches with the browse user agent apply the design exception set. In our case we’ve used “ iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini ” for every browser on every device mobile. This may not be an exhaustive list of mobile browser agents but you get the idea. To check for your specific user agent, you can use this is website : http://whatsmyuseragent.com/.
  • “Value”:  is what you want the field value (in this case package name ) to be when that expression returns true. In orther words, this is the theme you want to display on mobile devices.

Let’s look at how to set the dukan_mobile theme for mobile device customers:

mobile_config

After you’ve setting package and theme, click on “Save Configuration”.

Clear your cache and view your site from a mobile device. You should see the mobile theme and your computer should still show the main theme.

Congratulations! You have successfully completed your installation.

Rate This Article

(17 out of 30 people found this article helpful)

Leave A Comment?