← Previous Post Next Post →

How to setup a mobile theme in Magento 1.7

Back to magento tips

Recent studies have shown that in the near future (by 2014) more people will use mobile devices ( iPod, iPhone, Tablet ...) rather than computers, which can be a problem for the advancement of your business. Magento offers you an ideal solution how to overcome that problem. This tutorial will help you to install a mobile theme on your web site.

You can quickly and very easily create a storefront, which is suitable for mobile devices, so users can shop even when they aren´t near their computers.

Magento 1.7  uses HTML5 technology, which is supported by iPhone , Android, Opera Mini, iPod, Blackberry and many more.

HTML5 technology includes many out-of-the-box features, which give you many advantages such as:

• Specific video and audio media capabilities
• Simple search and results display
• Your display will be clean of product detail pages
• Swiping product images is very easy
• You can zoom in and zoom out
• Cross-sell and up-sell capabilities
• Drag-and-drop capabilities
If you want to activate the HTML5 mobile theme for Magento 1.7, you need to follow these instructions. There are only four steps in how to setup a mobile theme on your web site. These are the steps:

Step 1

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

Your package must be set exactly like your theme. If it isn´t, your next step is to click on "Add Exception", which is under the "Current Package Name". After this you´ll get a form with several fields.

The most important is the "Matched Expression". It´s a string you want Magento to match in the User Agent of the browser. That´s why this field is so important.

In the "Value", you enter a valuation (what you want it to be) of that field when the expression comes back true. For example, in this case, value = package name.

One of the problems can be if the theme is beyond the default package. To solve this problem you must enter “default” as the value (mobile theme is at default/iphone).

The next move is to enter different "Matched Expressions" for any platform. You need to type one of the examples which are located below:

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

Step 2

In the Themes area (System > Configuration > Design > Themes - Templates, Skin, Layout) you should repeat everything which is described in Step 1, except for one thing. In the field "Value", you need to write the name of the theme folder (for example "iphone" or "android").

Step 3

The next thing is to click on the field “Save Configuration”.
When you are done with that, you´ll need to do one more step, which is easy, and you´ll do it very quickly. After that your installation will be finished.

Step 4

Step 4 begins when you clear your cache. Whatever mobile device you use, you´ll be able to  see your website from it. You should now see the mobile theme, and your computer should still show the main theme.

---

Congratulations! You have successfully completed your installation.

As you can see, the installation process is short and very simple, but it means a lot to the customers. After all, with the advantages that Magento gives you, you´ll improve your web site and raise your business to the next level.

← Previous Post Next Post →
Leave a Reply