Taking Your Magento Store Mobile

There are a number of different studies and statistics on mobile usage, but a general estimate is that mobile shoppers now account for approximately 30% of visits to online stores and 15% of orders. This means it’s becoming increasingly likely your customers are viewing your Magento store on their mobile devices and tablets. If you provide them with a streamlined experience that works on both desktop and mobile, you can boost your store’s sales. Your business’s success depends on your ability to adapt as online trends evolve.

Installing a Responsive Theme

The best option for ranking well with Google is to choose a responsive design for your store. There are a number of responsive templates available for Magento stores online, or you can work with a web development company to create a custom responsive design based on your existing website.

Responsive themes communicate with customers across multiple devices, making sure that their shopping experience is optimized, whatever the technology they’re using. When you install a responsive theme for your site, your store will detect the type of device your customers are using and adjust its behavior to match that device. Customers can navigate easily, discover what they’re looking for and purchase products. When websites are responsive, it means that they serve the same HTML for both the desktop and mobile versions, with only changes in the CSS files for different display options. This tends to make Google happier, because it streamlines the browsing experience without using up a lot of resources.

If you are looking into installing a responsive theme, it’s in your best interest to have a developer and designer on call. Make sure that they are comfortable working with Magento! Also make sure that you back-up your site before starting.

Not sure how to install a Magento theme? Check out this tutorial: Install Themes Using Magento Connect Manager.

Here are a few themes for you to look through: Magento Themes.

However, the process of installing a responsive Magento theme is fairly extensive and can also be expensive. If you already have a web design in place for your store that you are happy with, you may not want to install a new, responsive theme. A better option might be to install a unique mobile theme that coordinates with your design and store functionality.

Installing a Unique Mobile Theme

If you would like reach your mobile users with a unique theme, Magento gives you lots of freedom. First select a mobile theme that is a good fit for the style and functionality of your store. Here’s a great place to find a variety of mobile themes at varying price points: Magento Connect Mobile Themes.

Once your theme is installed, you’ll want to add design exceptions for mobile devices.

  • To do this: Navigate to System > Configuration > General > Design
    • Expand the Themes panel: You’ll see fields for Translations, Templates, Skin, Layout, and Default.

Mobile 1

    • Click on the Add Exceptions buttons beneath the Templates, Skin and Layout fields. When you click Add Exceptions, more fields will appear.

Mobile 2

    • Matched Expression: In this section you’ll want to specify the devices for the exception you’re creating. Separate each device name with a pipe symbol (|). An example of what this looks like is:iPhone|iPod|Android|BlackBerry|SafariMobileYou can enter as many devices as you would like.
    • Value: Enter the name of your recently installed mobile theme. Magento will check your visiting customer’s device and, if it matches one you specified, it will display the theme you entered into this field.
    • If you would like to add a separate exception for a different device, you can click the Add Exception button again and another Matched Expression and Value field will appear.
  • Don’t forget to Save Config!

You might need to flush Magento Cache for your mobile theme to show up.

If you would like to see how the mobile theme will display using your desktop, Ultimate User Agent Switcher is an option for Chrome users. It fools your Magento store into believing that you are using a mobile device, so you can do any testing you like from your desktop or laptop computer.

Another option, if you’re happy with the desktop version of your store but can’t find a mobile theme that works for you, is to hire a development agency to build a custom mobile design for your store, or to make your existing design responsive. The advantage to this approach is that shoppers might have a better sense of continuity between the different versions of your site. If you’re looking for a web development company to make your current design responsive, please feel free to give us a call!

Designing for Mobile

A good mobile store design tends to be less text-heavy, relying more on visuals, a few titles, and simplified browsing. Keep descriptions as brief as possible. Make sure your call-to-action buttons are full-sized and easy to use. Your products should be the central focus of your mobile store so customers know exactly where to go. It’s also important to mobile users that the checkout process feels simple and safe.

Other options for making your Magento store mobile-friendly:

  • Magento Mobile
    Magento Mobile is a mobile-commerce extension that supports usage on iPhones, iPads and Android devices. Your smart phone shoppers will find it simpler to navigate and purchase items from your store. Installing Magento Mobile brings many of the out-of-the-box features available with Magento into the mobile world. Keep in mind that you might want some development assistance to make sure that Magento Mobile plays nicely with other extensions you might have installed on your store. Magento Mobile is priced per device, with fees for setup, maintenance, and an application key.
  • Other Extensions
    If you’re looking for another option for converting your desktop website into one that is optimized for mobile, one of the following extensions might work for you:

Web Design,Magento


Let’s Get In Touch

Our team would love to talk with you about your goals for your business and how our experienced developers and designers can help you achieve those goals. Whether you have a simple question or a complex upcoming project, please don’t hesitate to reach out.

  • We'll be in contact soon!
  • This field is for validation purposes and should be left unchanged.