Need some help?

I'm usually available for small jobs or problem solving with jQuery or css, at reasonable rates. Just get in touch.

Web Hosting

We recommend Clook for web hosting. UK based, great service and great value.

Buy me a drink

If you've found this useful, particularly for commercial projects, you might consider making a small donation.

Creating a mobile theme for Opencart

In the past few weeks I’ve been working on a mobile theme for Opencart. This is a summary of what I did. There’s some more information available on these blog posts as well.

  • Rewrote most of the templates to: remove structural tables, ensure the pages function without javascript, and generally simplified into a single column design
  • Created a brand new css file, removing all the background images except those used for the mobile menu
  • Only displaying the Categories and Information modules on the home page, nothing else
  • Created a separate Information page for Contact details, just for the mobile site
  • Removed related products from the product page
  • No search facility
  • Removed popup windows for product images and terms and conditions
  • No sidebar cart, instead a mobile specific version of ajax_add.js which updates the cart and updates an indicator in the heading showing the number of products in the cart

Not that it’s infallible, but the main, non-mobile site scores 3% on the W3C Mobile OK Checker, and the new mobile site scores 99% (the remaining 1% being because I haven’t set the height on the header image to allow it to resize to the screen.

After experimenting with using media queries on the main site to display a link to the mobile site below certain dimensions I’ve instead just followed the BBC’s approach and displayed a link permanently.

Because a couple of people have asked, here’s a zip file containing the template files and javascript, plus a vQmod file containing the necessary amendments to the controller files :

Mobile theme files (49kb).

This contains the mobile theme plus code which I was using already which displays and dynamically updates the quantity of stock available per product. This works with Opencart 1.4.9.5 but won’t work with Opencart 1.5 without some considerable modification – see here for a version for Opencart 1.5.

You’re welcome to feedback comments but I’m not offering to support this theme full time. If you do use it, however, then a “buy me a drink” donation would be appreciated.

You can see the live site here – this uses a very slightly customised version of the mobile theme to support some additional images.

Tags:

12 responses to “Creating a mobile theme for Opencart”

  1. Cool says:

    I’m going to change my theme of my main site, but my problem is my old theme is full compatible with your mobile template but my new theme GAZAL (You can download and test it from here:- http://www26.zippyshare.com/v/13132804/file.html ) is not functioning if i use your mobile template. Please help me and send to me the solved template of your mobile template.

  2. Simon says:

    Sorry, I’m not prepared to make alterations to fit in with another theme.

  3. Cool says:

    Please i’m going to use the GAZAL theme but i also want your mobile template. I request you please help me.

  4. Simon says:

    If you’re prepared to pay for my time let me know, but otherwise no.

  5. Jack says:

    How can i insert a picture instead of color in header of the theme?

  6. Simon says:

    Set background-image on #header in the css, replacing the background-color setting.

  7. Jack says:

    Unable to do it. when i changed it to image, only color is gone. What is code for image setting?

  8. Jack says:

    Sorry to disturb you again. How can i change the font colour of nav bar (Home, Shopping Cart, My Account Buttons)?

  9. Simon says:

    Set color for .links a.

  10. Jack says:

    Unable to do it Sir. Please give me the code and insert instruction.

  11. Simon says:

    I’ve practically told you already:

    .links a{color:#333333}

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.