Author - Robert Popovic

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 (62)

  1. 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:

  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.

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

    I am currently working on “mobilizing” 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 😉

    1. Napoleon
      July 17, 2014 at 10:04 pm /

      The same with me, buddy. Graphics designer / photographer in the job description but working almost all my time in IT tasks. This is a big help for me.

  5. 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?


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


    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.


  7. 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.

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

    […] 如何设置当用户使用手机访问Magento的时候,看到的是手机模板,使用电脑访问网站的时候,看到的是普通模板:… […]

  9. 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!!

    1. rawi
      May 22, 2011 at 3:50 pm /

      click on catalog open

      404 not found 1

  10. 使用Magento实现平民的手机B2C平台 | 开发 | Magento中文项目组

    […] 如何设置当用户使用手机访问Magento的时候,看到的是手机模板,使用电脑访问网站的时候,看到的是普通模板:… […]

  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 to do this?

  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.

  13. 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.

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

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

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

    Will this work for ipad too?

  16. 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

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


    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! 🙂

    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"/>
  18. Sergio Giudici
    April 20, 2012 at 3:11 am /

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

  19. 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.

  20. 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.

  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.

  22. 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 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.

  23. 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?

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

    nevermind. figured it out. thanks!

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

    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.

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

    Hi Robert,

    another knock-off of your great tutorial;
    Sad they couldn’t include attribution,


  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:


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


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

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

    May be you can check our solution for magento mobile store.

  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"; […]

  31. Lakshmi
    July 11, 2014 at 11:24 pm /

    Another easy way of creating an iPhone app for your Magento store is using the MobStac platform ( Our iOS SDK eases app building and our Magento extension fetches catalog information, syncs Cart, inventory information etc. from your e-commerce backend. Integrate your app with Stripe for payments and start selling products and accepting in-app payments in less than 2 weeks.

  32. Purple
    July 20, 2014 at 1:43 pm /

    I added the iphone exception under Config > General > Design > Theme according to the steps in the recently learned hyperlink above but the iphone theme didn’t load up when I view on my iPhone.

    As my current site is coded responsive, is there a way to hide blocks when viewed on mobile instead of using the above method to redesign from scratch?

  33. Danica
    November 7, 2014 at 9:04 pm /

    Have anyone used SimiCart which is stated that best synchronized with Magento store
    As I can see on their site, this app platform allows to create unique customized app without tech skills. Sounds incredible, but I dont know if it could be. Anyone have tried it?

    1. Linda
      November 25, 2014 at 5:06 pm /

      You can check our magento mobile theme here:

  34. Alex Song
    Alex Song
    November 26, 2014 at 6:44 am /

    May be you can check our solution for magento fashion store:

  35. Eren
    March 10, 2015 at 5:02 am /

    I could not run this code. If you could help


  36. Best Magento hosting
    May 8, 2015 at 7:01 am /

    Thanks for the tips, I found out that there are some tool allowing you to create Magento mobile page easily like Simicart or Magento mobile app

  37. How To Create Custom Layout In Magento | MY NEWS

    […] How To “Mobilize” Your Magento Site for iPhone, Android … – 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 …… […]

  38. How To Create Page Layout In Magento | MY NEWS

    […] How To “Mobilize” Your Magento Site for iPhone, … – 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 …… […]

  39. Harry kane
    February 25, 2016 at 5:31 pm /

    SimiCart is a M-commerce solution for Magento store owners to generate their own mobile appplication
    Magento mobile app builder AUTOMATICALLY. At SimiCart, you can build iPhone and android application synchronized with Magento store. FREE to start !.
    You must have magento mobile apps, right away! Because this is the best way to interact and convert sales from mobile users (PROVED)
    Go Magento mobile apps to convert sales way better!
    SimiCart is a solution that helps Magento Merchants build mobile shopping apps.
    Magento merchants: Our solution is specially designed for Magento platform so you can get all the best features of Magento to apps. If you use a solution for every platform you’re missing many good things.
    Mobile shopping apps: You will have apps that are coded separately and specifically for iPhone and android.
    Your customers can search and download your shopping apps from Google Play and Apple stores. And again, such tailored apps will bring the best user experience!

  40. Sample
    August 10, 2017 at 8:22 pm /

    Nice Post, keep sharing like this.

  41. Lokesh
    August 3, 2018 at 9:36 am /

    Great work and thanks for sharing with us…! iGnocart Mobile Commerce Solution which supports all platform like android and iOS. So, if you want develop your m-commerce sites in Magento for your next project check out

  42. Lokesh
    August 3, 2018 at 9:38 am /

    Great work and thanks for sharing with us…! iGnocart Mobile Commerce Solution which supports all platform like android and iOS. We will help you to convert your business ideas into a reality through smart business app. Get in Touch with us and Get Free Quotation for Contact Us.


Add a Comment & Join the Discussion

Insert small snippets of code by using [code]{your_code_here}[/code]
For larger code blocks please use 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>


This site uses Akismet to reduce spam. Learn how your comment data is processed.