nopCommerce Tips: Matching Your Mobile Theme with Your Site Theme

nopCommerce introduced native mobile support with the advent of version 2.4; with an ever-increasing percentage of mobile users, it’s a great way to optimize your customer base. nopCommerce ships with one mobile skin; however, if you’ve customized the theme for your site, you may wish to update the mobile theme to maintain consistent branding. Today, we’ll cover how to do so.

The nopCommerce mobile theme leverages the  jQueryUI theme, making it a flexible and extensible UI, supported by the majority of modern mobile devices. The folks at jQueryUI have created 24 “standard” UI themes, and also offer the awesome ThemeRoller online application that will allow you to create a custom theme using your own color selections.

You may feel the need to work with your designer on this, but it’s really very easy. If you’ve already got a list of your theme colors in hex (#xxxxxx format), go ahead and open up ThemeRoller and get started.

Desktop Theme

Here, you see the desktop-site theme for this client. Now, we’re going to create a jQueryUI theme to match. After some adjustments, we’ve now got this on the ThemeRoller site.

Custom ThemeRoller

Once you’ve got the theme looking the way you want, it’s now time to download it, and integrate it into your mobile skin.

Once you download the .zip file, open it up, and compare the files inside to those in your nopCommerce Mobile skin. You can start by swapping out the file ‘jquery.mobile.theme-1.1.0.min.css’. To test the results, you can do one of two things; use an emulator (like the one that’s available for free in the Andoid SDK), or use extensions such as Modify Header and User Agent Switcher. The benefit of using the extensions is that you can leverage Firebug to track down the rest of your CSS that needs to be modified in the style.css file inside your mobile theme.

After you’ve completed all your theme updates, your mobile theme will match your web skin theme, and maintain consistent branding.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Looking for quality nopCommerce Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

One Comment on nopCommerce Tips: Matching Your Mobile Theme with Your Site Theme

  1. These mobile themes were great and it were interesting in to know about it ……

Leave a Reply

Your email address will not be published. Required fields are marked *


7 − 1 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>