As we recently learned, it’s pretty straight forward to redirect your mobile visitors to a mobile-optimized theme, the natively supplied iPhone theme.
However, after the initial euphoria of our success, we realize that we want to start changing some things, like the logo and maybe have a mobile specific home page.
This tutorial* will show you how to start customizing your mobile store theme, but first, let’s see how we’re going to set up our testing environment.
* The Magento version this tutorial is written for is 1.4.1.1
1. Setup
We will assume that we have a test Magento site where we have already applied the exception for redirecting mobile device browsers to the iPhone Magento theme.
To test our mobile site, Safari makes it convenient to set the browser user agent by going to the menu: Develop > User Agent and setting it to iPhone.
I’m pretty sure there are ways to do this with some Firefox extensions otherwise, just use your phone to test.
2. The Situation
We’ve set up our test site with the stock Magento Modern theme and the stock iPhone theme. Let’s see what we have out of the box:
The first glaring thing we’d want to change is, yep, the Magento demo store logo. But, we know how to change that quickly.
3. The Logo
This is no design tutorial so I just created a simple graphic logo for illustrative purposes as logo.png so it doesn’t overwrite the original logo file.
I dropped it into: skin/frontend/default/modern/images/logo.png and edited the config setting: Configuration > General > Design > Header -> Logo Image Src to read images/logo.png.
Looking at the site now, we see the changed logo.
Let’s check the mobile site.
It’s showing the same logo as the main site, so we obviously need to sort this mess out and create a smaller, mobile friendly logo!
To do that, it’s becoming obvious that we will start changing some files in the iPhone theme so we’re going to make a copy of it and customize that. This way we won’t impair the ability to apply Magento updates.
We have already written about how to create your own design package but in our case we will simply make a copy in the default package under myiphone.
We’ll do this for both the skin/frontend and the app/design/frontend directories since we’re also going to change some layout and template files.
Don’t forget to edit the design exception and change it from iphone to myiphone.
Then, to fix our unfortunate logo on the mobile site, just drop a new, mobile friendly logo.png into skin/frontend/default/myiphone/images/ and admire the handiwork.
I know it looks a bit odd right now but the goal is to change the header colors so we’ll do some stylesheet edits in the myiphone skin: myiphone/css/iphone.css.
I settled for this look as an illustration that the mobile iphone theme can easily be customized with a couple of images and some CSS changes. Basically, we created a new logo and replaced the background gradient image for the menu.
3. The Home Page
Looking at the demo site, we see that the normal home page contains a (slightly modified) default home page text that can be edited under CMS > Pages > Home Page.
However, the mobile home page just shows the categories (blank, if you don’t have any categories set up).
We know how to modify the normal home page but what about the mobile one? Changes to the CMS home page don’t show up on the mobile version. And we don’t really have a mobile “store view” to which we can apply a different home page CMS content.
4. Changing the Design
Let’s first decide what our goal is going to be.
Say, we want our mobile home page to show a slogan, the latest store products and the “Catalog” link should go to our special Mobile store category where we can present products that would be more relevant to our mobile customers.
Let’s see what makes the home page display the category menu on the mobile theme. Looking at cms.xml we see:
<cms_index_index>
<block type="catalog/navigation" name="cms_page" template="catalog/navigation/top.phtml" />
</cms_index_index>
So, this is telling us that the CMS page content is by default replaced by the top navigation block which just lists all the store categories.
If we want to have a custom mobile home page, different from the normal site home page, we can’t use the CMS “Home” since it’s going to be the same for both sites. However, we can create a CMS static block that will act as our mobile “Home”.
Let’s change the XML above to load a CMS static block with id mobile-home instead:
<cms_index_index>
<block type="cms/block" name="cms_page">
<action method="setBlockId"><block_id>mobile-home</block_id></action>
</block>
</cms_index_index>
Create a new CMS static block with ID mobile-home. You can name it anything you like. The CMS block will contain our slogan in the form of a h1 title and display a list of new products available in our online shop:
<h1>Mobile home page - Hot!</h1>
{{block type="catalog/product_new" template="catalog/product/new.phtml"}}
For simplicity, we’re just using the Magento supplied new product block making sure we have a few products in our store with the “Set Product as New from/to Date” fields set appropriately.
Our home page is looking pretty decent already. Now we just have to create the mobile product category, put some product in there and set the “Catalog” link to the new category.
The “Catalog” link is set in customer.xml, the default being:
<reference name="top.links">
<action method="addLink" translate="label title" module="customer"><label>Catalog</label><url>{{baseUrl}}</url><title>Catalog</title><prepare/><urlParams/><position>9</position></action>
</reference>
To get our link to link to the mobile category, we’ll change it to:
<reference name="top.links">
<action method="addLink" translate="label title" module="customer"><label>Catalog</label><url>mobile.html</url><title>Catalog</title><prepare/><urlParams/><position>9</position></action>
</reference>
By default, the main category navigation is available on all pages on the mobile site. We need to make sure that it only shows up on the catalog pages so we will modify catalog.xml removing:
<reference name="top.menu">
<block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/>
</reference>
from the default element and moving it to the catalog_category_default element:
<catalog_category_default>
<reference name="top.menu">
<block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/>
</reference>
...
</catalog_category_default>
Now we just edited the padding on the content div and removed the review summary from displaying on the new products listing. This is removed in template/catalog/product/new.phtml:
<p><a class="product-name" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>)"><?php echo $this->htmlEscape($_product->getName()) ?></a></p> <?php // echo $this->getReviewsSummaryHtml($_product, 'short') ?> <?php echo $this->getPriceHtml($_product, true, '-new') ?>
You’ll no doubt continue fine-tuning the display now that we outlined the starting points for the process.
5. Further Ideas
The above is just the beginning of customizing your mobile site. There are many ideas that come to mind for further enhancements.
For example, you can modify the home CMS static block to directly display the products from the mobile category or a mobile specials category.
You can implement a mobile friendly home page carousel showing featured products.
The list can go on.
As it stands, the iPhone theme is optimized for vertical viewing and forces a width of 320px but you can build some more flexibility in by editing the css and phtml files to add more mobile specific formatting. For example, you can just change the max-width on the body to a higher value to allow for a full width view when the phone is flipped into landscape.
If you have implemented a mobile site, we’d love to see it so please share it in the comments. Also, if you have any ideas about what you’d like to see in a follow up tutorial, let us know.
Happy mobile commerce!
Originally published on magebase.com. Copyright © 2010 Magebase - All Rights Reserved.
Proud members of the 
“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/
@gaston
Thanks for the pointer.
[...] How To “Mobilize” Your Magento Site for iPhone, Android, Mobile … [...]
Nice article. Thanks. It helped me.
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
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.
@dustin
Modifying the iPhone theme is much the same as customizing any Magento theme. If you are familiar with that, you should be able to achieve your outlined goals. This article presents some starting points and ideas, any further customization is up to the readers.
@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.
Sorry, at this stage we can’t provide individual assistance.
where is the favicon default path for mobile? my site still displaying magento favicon.
thanks in advance.
[...] 如何设置当用户使用手机访问Magento的时候，看到的是手机模板，使用电脑访问网站的时候，看到的是普通模板：http://magebase.com/magento-tutorials/how-to-mobilize-your-magento-site-for-iphone-android-mobile-co… [...]
well i change everything. but when i click on ‘Catalog menu’ it move to home page not category!!
i’ve done wrong?
help me!!
click on catalog open http://converse.magento-skin.com/index.php/mobile.html
404 not found 1
[...] 如何设置当用户使用手机访问Magento的时候，看到的是手机模板，使用电脑访问网站的时候，看到的是普通模板：http://magebase.com/magento-tutorials/how-to-mobilize-your-magento-site-for-iphone-android-mobile-co… [...]
I just found a copy of this blog entry:
http://www.oscillosoft.com.au/magento/151-how-to-mobilize-your-magento-site-for-iphone-android-mobile-commerce.html
David, thanks for the heads up. I’ve sent them a notice to remove or credit the content. This sort of thing has happened before… sad indeed.
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?
Check the link in this comment: http://magebase.com/magento-tutorials/magento-design-exceptions-explained/comment-page-1/#comment-1345
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.
How do I add the “Proceed to checkout” button on the shopping cart page of the mobile template? It seems to be missing.
Button should be there already. Is your checkout perhaps disabled in the system configuration?
No – it is enabled. It is there on the “regular” site.
Does anyone have any ideas on this?
I just checked on my Magento 1.6.2 install and I can clearly see the big orange “Proceed To Checkout” button on the mobile iphone theme when browsing with a mobile device. You should check your site in Safari set to emulate an iPhone user agent (as outlined in the article) and inspect your page to see if the code for the button is present in the HTML. It may be that you’re missing the button image? This could be the case if you made a copy of the iphone design theme and renamed it but didn’t create a similar skin folder? You need to provide more detail about your situation if you want help to resolve it.
I had the same problem. In iphone.css, I changed line 302 to say:
.cart .checkout-types li:last-child { display:block; /*margin:10px 0 15px 0; font-size:14px;*/ }
Thank you LC! I must’ve missed that when looking through the css. Much appreciated
How would I go to remove the footers on my mobile version.
The iphone theme uses the same theming and layout principles as any other Magento theme so you should be able to add a local.xml file to your layout folder and use it to remove unwanted layout elements. If you are unfamiliar with Magento layouts, check our other articles in our layout series.
Thanks Rob! You’re awesome!
Will this work for ipad too?
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
The built in iPhone theme does not support an image gallery for additional product images. Hoever, when you tap to enlarge the main product shot, you have the opportunity to go through the other gallery images uplaoded to your product.
If you want to add a gallery to the iPhone theme page, then it’s a matter of customizing the iPhone product page template to add code to show this. Working with the iPhone template is no different than working with a standard Magento template so if you are familiar with this, it should be straight-forward.
Alternatively, you can purchase a professional mobile theme such as the AheadWorks iPhone theme which already takes care of your requirement and adds more features to your mobile store.
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!
Code doesn’t appear. let’s try putting this
Do you think this would work with Magento ver. 1.3.2.3?
That’s the version I have. Thanks!
Design exceptions have been in Magento from the early stages and 1.3.2.x indeed has the same capability so this should work.
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.
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.
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.
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.
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?
nevermind. figured it out. thanks!
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..
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