Tuesday , December 12 2017
Home >> All tutorial >> Magento theme tutorial: How to customize mobile store theme

Magento theme tutorial: How to customize mobile store theme

Hey guys,

Today tutorial will guide you how to start customizing mobile store theme with a five-step instruction. Let’s start now!

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.

safari-set-iphone-test

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:

modern-default-150x94

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.

 

config-design-header-logo

 

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.

modern-logo-changed

 

Let’s check the mobile site.

mobile-logo-changed

 

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

We’ll do this for both the skin/frontend and the app/design/frontenddirectories since we’re also going to change some layout and template files.

folders-myiphone

Don’t forget to edit the design exception and change it from iphone to myiphone.

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

mobile-logo-correct

 

 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.

mobile-store

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:

 1

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:

 2

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:

3

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.
new-mobile-home

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:

<referencename=”top.links”>

    <actionmethod=”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:

 <referencename=”top.links”>

    <actionmethod=”addLink”translate=”label title”module=”customer”><label>Catalog</label><url>mobile.html</url><title>Catalog</title><prepare/><urlParams/><position>9</position></action>

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:

<referencename=”top.menu”>

    <blocktype=”catalog/navigation”name=”catalog.topnav”template=”catalog/navigation/top.phtml”/>

from the default element and moving it to the catalog_category_default element:

<catalog_category_default>

    <referencename=”top.menu”>

        <blocktype=”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’) ?>

 

We also contribute great content of Magento Download for FREE (all versions)

DON'T MISS THE CHANCE!

magento download

About Champ

Heap | Mobile and Web Analytics