Author - Robert Popovic

Founder and Technical Director of LERO9, a web agency specializing in Magento and WordPress design and development.

I launched Magebase in April, 2010 and am its editor and contributor. My main topics of interest are Magento development, customization and how to get the most out of Magento with the least amount of headache.

More Info » Follow me on Twitter »

Reader Comments (48)

  1. gaston
    gaston
    September 11, 2010 at 12:52 am /

    “I’m pretty sure there are ways to do this with some Firefox extensions”

    Here is one:
    https://addons.mozilla.org/en-US/firefox/addon/59/

    Reply
  2. Magento: Ratings and Reviews | iFree Talk
    September 22, 2010 at 10:29 pm /

    [...] How To “Mobilize” Your Magento Site for iPhone, Android, Mobile … [...]

  3. Wolf
    November 18, 2010 at 11:24 pm /

    Nice article. Thanks. It helped me.

    Reply
  4. Jason
    February 18, 2011 at 2:45 pm /

    I am currently working on “mobilizing” http://www.elliottchandler.com and am excited to have recently stumbled upon your expertise. I am by no means a developer, but a graphic designer who has been thrown into the lions den on this one ;-)

    Reply
  5. dustin
    dustin
    April 4, 2011 at 8:13 am /

    Hi Rob,

    Thanks for the nice article.

    Now after installing iphone theme, we find that the home page displays top level categories and child categories too which is a problem as we have about 5 top level categories and about 100 subcategories.

    1. Which files must we change so that the home page displays just the 5 top level categories.
    2. then clicking any category must show its sub category
    3. also how to show the ‘search box’ in the mobile theme top header?

    thanks.
    dustin.

    Reply
  6. dustin
    dustin
    April 5, 2011 at 4:48 pm /

    @Rob,

    I am not so familiar with magento, if you can give me some pointers as to which files must be worked on to achieve the home page categories listing i think i can take it on from that and would be very helpful.

    thanks.

    Reply
  7. needle
    needle
    April 29, 2011 at 11:42 am /

    where is the favicon default path for mobile? my site still displaying magento favicon.
    thanks in advance.

    Reply
  8. 使用Magento实现平民的手机B2C平台 | magento开发 | magento教程

    [...] 如何设置当用户使用手机访问Magento的时候,看到的是手机模板,使用电脑访问网站的时候,看到的是普通模板:http://magebase.com/magento-tutorials/how-to-mobilize-your-magento-site-for-iphone-android-mobile-co… [...]

  9. rawi
    rawi
    May 22, 2011 at 3:48 pm /

    well i change everything. but when i click on ‘Catalog menu’ it move to home page not category!!

    i’ve done wrong?

    help me!!

    Reply
    1. rawi
      rawi
      May 22, 2011 at 3:50 pm /
  10. 使用Magento实现平民的手机B2C平台 | 开发 | Magento中文项目组

    [...] 如何设置当用户使用手机访问Magento的时候,看到的是手机模板,使用电脑访问网站的时候,看到的是普通模板:http://magebase.com/magento-tutorials/how-to-mobilize-your-magento-site-for-iphone-android-mobile-co… [...]

  11. Pranil Singh
    Pranil Singh
    October 20, 2011 at 11:43 am /

    Hey just wondering if it’s possible to have a link back to ‘View full site’ or something? Since the method uses the browser user agent, is that even possible? Or do you need to set up say m.website.com to do this?

    Reply
  12. emil
    November 16, 2011 at 2:37 am /

    Hi, I am also working on my mobile version. It would be grate to have a tutorial on “How to mplement a mobile friendly home page carousel showing featured products” Thanks for this tutorial.

    Reply
  13. Geoff
    Geoff
    January 14, 2012 at 11:00 am /

    How do I add the “Proceed to checkout” button on the shopping cart page of the mobile template? It seems to be missing.

    Reply
  14. Sergio Giudici
    February 3, 2012 at 5:47 am /

    How would I go to remove the footers on my mobile version.

    Reply
  15. Chintan Parikh
    March 13, 2012 at 6:32 pm /

    Will this work for ipad too?

    Reply
  16. uniquevisitor
    uniquevisitor
    March 24, 2012 at 1:03 am /

    Dear Robert,

    thanks for the good mobile tutorial. It’s work :)
    When i have more than 1 picture on the product page, the mobile template not showing the all images, only the first. Please help, how to view the all product picture? I use the magento 1.4.2.

    thank you

    Reply
  17. Simon
    April 8, 2012 at 1:28 am /

    Hi,

    thanks a lot for you article, it has helped me a lot. I’m trying to get the main menu to shop up. Have added

    in customer.xml
    but am not sure how to call the menu bar.

    any help will be highly apreciated! :)

    Reply
    1. Simon
      April 8, 2012 at 1:29 am /

      Code doesn’t appear. let’s try putting this

      		<reference name="top.links">
      			<block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/>
      		</reference>
      
      Reply
  18. Sergio Giudici
    April 20, 2012 at 3:11 am /

    Do you think this would work with Magento ver. 1.3.2.3?
    That’s the version I have. Thanks!

    Reply
  19. mike
    mike
    June 18, 2012 at 7:39 pm /

    I was able to change everything but getting an error(404 not found) when clicking the catalog button. I have created a mobile category as a sub and added product. I mwas able to get it working no time. I deleted it to change the name that was showing and now can’t get the link to work again for catalog.

    Reply
  20. mike
    mike
    June 19, 2012 at 11:03 am /

    I was able to figure it out. Everything is working and I added feature products to the home page along with new product with this code – {{block type=”featuredproducts/listing”}} in the stic block mobile home.

    Thanks for the guide.

    Reply
  21. The Forge
    August 14, 2012 at 4:56 am /

    I have been looking for a way to implement mobile into my Magento cart. Thank you for the great article. It has been most helpful.

    Reply
  22. Mark
    Mark
    December 6, 2012 at 5:43 am /

    One little update concerning that logo. Somewhere between the publishing of the most excellent tutorial and version 1.7.0.2 of Magento CE, the iphone theme acquired a @media query to handle retina displays. I was unaware of this, of course, and the result was that I changed the logo and background files bg_logo.png and bg_header.png, turned off the cache, and made everything work nicely in Firefox on my desktop (using a user agent switcher to get the mobile site). when I went to look at the site on my Gallaxy S3, everything but the logo and header background were changed in the Android browser and Chrome. What made it even more confusing to me was that the Firefox mobile browser displayed the correct images.

    After several attempts to clear the cache on the Android browser, having others try it, and still getting the same results, I looked once again at the images/custom folder that held these particular images, and there I found bg_logo_retina.png, and bg_header_retina.png. These were identical to the old bg_logo.png and bg_header.png files except that they were twice as big. Once I scaled up my new logo and header files, and replaced the retina files, everything was great. I also had to add -moz-box-sizing:border-box; to the .search field so that the search box was sized properly on Firefox, but that is all.

    So when ugrading your site to 1.7, you are going to have to deal with the retina display graphics as well as the graphics for everyone else. Be sure to check a variety of devices.

    Reply
  23. Tasha
    Tasha
    December 14, 2012 at 1:43 pm /

    I made all changes described, however when I click on the “catalog” link my mobile.html is a 404.
    Is there a step I am missing?

    Reply
  24. Tasha
    Tasha
    December 14, 2012 at 1:58 pm /

    nevermind. figured it out. thanks!

    Reply
  25. web developer
    January 14, 2013 at 6:48 pm /

    Hi..
    Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly.
    Thanks..

    Reply
  26. paul
    March 14, 2013 at 4:18 pm /

    Hi Robert,

    another knock-off of your great tutorial;
    http://www.magemetro.com/blog/How-To-Mobilize-Your-Magento-Site-for-iPhone-Android-Mobile-Commerce/
    Sad they couldn’t include attribution,

    Paul

    Reply
  27. Ned Dev
    October 19, 2013 at 12:08 pm /

    Hi everybody,

    Just wanted to let you about our Magnto mobile theme, Check it here: http://www.neddev.com

    Thanks

    Reply
  28. kim
    kim
    January 8, 2014 at 3:43 am /

    Catalogmobile.htmlCatalog9

    Where did this: “mobile.html” ???? mobile.html does not exists!!!

    Reply
  29. Hiren
    February 1, 2014 at 7:51 pm /

    May be you can check our solution for magento mobile store. http://davehiren.blogspot.com/2014/01/convert-your-magento-store-to-mobile.html

    Reply
  30. Digging Deeper Into Magento’s Layout XML – Part 2

    [...] How To “Mobilize” Your Magento Site for iPhone, Android, Mobile Commerce google_ad_client = "pub-2618816346653839"; google_ad_width = 300; google_ad_height = 250; google_ad_format = "300x250_as"; google_ad_type = "text_image"; google_color_border = "#FFFFFF"; google_color_bg = "#FFFFFF"; google_color_link = "#000000"; google_color_text = "#000000"; google_color_url = "#008000"; [...]

Add a Comment & Join the Discussion

Insert small snippets of code by using [code]{your_code_here}[/code]
For larger code blocks please use http://pastebin.com and paste your link.

You may also use the following HTML in your comment: <a href="" title=""> <abbr title="">
<acronym title=""> <blockquote cite=""> <cite> <em> <strike> <strong>