Magento Mobile Version of Store with Tablet Support

Date: Oct 24 2011

Want to optimize your Magento store for Mobile platforms? This article will walk you through how to make your store not only mobile friendly but to serve a different version of your Magento store based on what mobile platform your customers are using. Other how-to’s do not show you how to deal with the increasingly popular tablet market like iPad, Android & Kindle Fire.

Magento Mobile Version of Website

 

Under the Magento Admin : System > Configuration > Design is where you want to be. You also want to make sure you have the “mCommerce – iPhone theme” or some mobile designed theme to server as your secondary store alternative for your mobile based clients.

Configuration

Depending on how you want to serve up your store depends on what configuration you want.

Option #1 : Show mobile version on Any Mobile Based OS (phone ,tablet, kindle fire)

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

Option #2: Show mobile version to just phone based browser and Display normal desktop version on tablet based devices

(iPhone|iPod|BlackBerry|Pre|Palm|Googlebot-Mobile|mobi|Safari Mobile|Windows Mobile|Android|Opera Mini|mobile)|(!iPad|Silk|Kindle|Xoom|SCH-I800|Tablet)

After you have chosen one of the configurations above go under the Design “Themes” section and add it to the following sections (Template, Skin, Layout, Default) in the “Matched Expression” field.  Then in the values section you should put in “iphone” in the value field. If you have a different mobile theme then your value field should be the theme name. Then click save config.

Magento mobile browser version configuration

So just to recap what we did: We are saying hey Magento if the “Browser User-Agent” matches any of the following “Matched Expressions” then change the theme directory to “Value”.  Make sure you test your new configuration on a mobile platform. If you don’t have any mobile devices to test with we recommend using Safari and following this great how-to “Using Safari for iPhone, iPad and iPod Touch Website Testing

Supported Browsers in this script as of October 2011

Phone Based Browsers:

  • iPhone / iPod
  • Android
  • Palm
  • Blackberry
  • Windows Mobile

Tablet Based Browsers:

  • iPad
  • Galaxy Tablet
  • Any Android Tablet
  • Xoom
  • HP WebOS

 

Be Sociable, Share!

facebook comments:

7 Comments to “Magento Mobile Version of Store with Tablet Support”

  1. Brady 11 June 2012 at 9:14 pm #

    This post is probably a bit out-dated, but thank you for putting it out there.

    I ran this on our Magento 1.3.2.4 store. It loads the mobile version as expected on my Android phone, but still loads the mobile version on my Kindle Fire running CyanogenMod7. Perhaps it’s because of the OS?

    • benleto 13 June 2012 at 3:26 am #

      I have updated the Magento string, for kindle fire Silk browser however your useragent string may show different for CyanogenMod. Please visit http://whatsmyuseragent.com/ on your device and let me know what it reports back. I should be able to get a solution for you.

      • Brady 13 June 2012 at 7:03 pm #

        Below is what whatsmyuseragent.com is reporting for my CM7 Kindle Fire using the CM7 browser with “Android” User Agent selected (default setting).

        Mozilla/5.0 (Linux; U; Android 2.3.7; md-us; Kindle Fire Build/GRK39F; CyanogenMod-HellFireKindle_V1.1) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari 533.1

        • benleto 19 June 2012 at 11:19 am #

          Sorry for the late reply. Give the updated Option #2 a try with the Kindle string in there now.

          • Brady 19 June 2012 at 8:43 pm #

            Even with the updated #2 string I’m still getting the mobile version on my Kindle Fire. Later today I’m updating it to a CyanogenMod9-based ROM (Ice Cream Sandwich OS), which I believe has more of a separation of phone and tablet.

  2. benleto 21 June 2012 at 12:05 pm #

    @Brady what is the url of the site you are trying to get this working on. I have a user agent string tester I can play around with it. Feel free to send me the url via the contact us form at the top of the page.

  3. Alaska 23 December 2012 at 7:36 am #

    I had a ‘hairpulling’ experience with Google Instant Preview only showing my mobile website with above description.

    Finally stumbled upon the syntax of the GoogleUserAgent that deals with the instant previews, namely:

    Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/[WEBKIT_VERSION] (KHTML, like Gecko; Google Web Preview) Chrome/[CHROME_VERSION] Safari/[WEBKIT_VERSION]

    As above agent contains the word Pre(view) the original post includes the word Pre to show the mobile site.

    So to prevent the mobile site show up in Google Instant Prevew, remove |Pre.

    Also, iPad is totally happy with the non-mobile version, so I removed |iPad also.

    We’re getting there, thanks for the info posted here.


Leave a Reply to Alaska