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.

Opencart 1.5 Mobile Theme

Following on from playing around with my existing theme to develop an Opencart Mobile Theme for 1.4.9.5, I’ve now done a rather more comprehensive job and created a complete mobile theme for Opencart 1.5. You can view the theme here.

Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme Opencart 1.5 Mobile Theme

I’ve attempted to keep as much content as possible, consistent with making the interface a little simpler and adapting controls where sensible for a mobile user. The theme is designed for a screenwidth down to 320px. Here’s a summary of the changes made from the default theme:

Common

  • Mobile doctype used
  • Removed breadcrumbs throughout, in a few cases replaced these with “back to parent” links
  • Removed the compare capability because it doesn’t really work on a small screen
  • Removed search
  • Removed the sitemap
  • Removed 99% of the tables, leaving a few true “tabular data” tables which shouldn’t break the design – on checkout summary, order info, return history and reward history
  • Removed all popup messages
  • Removed the content_left and content_right display entirely, and moved content_top into the header
  • Moved language and currency selection to the footer

Category and product pages

  • Added a check to lists of categories so they’re only displayed if the category contains products – note this assumes that there are no empty parent categories
  • On the category pages, defaulted the display to list, and removed the option to change the display
  • Added a message displayed at the top of the product page if the user clicks add to cart from a category page for a product requiring options to be selected – otherwise I think it’s a slightly confusing user experience
  • On the product page, replaced the tabs with an accordion, which works much better with the smaller screen, and replaced the image popups with a simple image replacement
  • On Featured, Specials, Bestsellers, Latest and Manufacturer pages, defaulted the display to grid, and removed the option to change the display

Checkout

  • For “add to cart” and “add to wish list”, replaced the top of the screen messages with ones create near the clicked button
  • Replaced the header cart with a link showing the quantity of items in a cart
  • Removed the horrible “estimate shipping costs” capability – just because I think the user experience is so poor
  • Reworked the checkout so that any messages are displayed in the body rather than at the top of the page, and rationalised the vast amount of js on that page down to a mere 690 lines
  • Added in the ability to redeem coupons during checkout (in version for OC 1.5.2.1 and later)

Configuration changes needed

  • Set the Additional Product Image size to 228px, same as the Product Large Image size
  • Set wish list and cart images to 50px

Pretty much every file in the theme has been amended in some way. Here are some ways the theme could be used. You might need to create a separate store, or create a new layout.

Can I use this on my site?

Probably. See my policies on using code from this site.

For the moment, I’ve made the theme files available free here. If you do download it, please let me have any feedback. If you use it, then a small donation would be appreciated.

The theme may not be repackaged and/or offered as a download, either free or for sale, without my permission.

Opencart version Download file
1.5.1, 1.5.1.1, 1.5.1.2 Mobile Theme (289kB)
1.5.1.3 Mobile Theme (289kB)
1.5.2, 1.5.2.1 Mobile Theme (297kB)
1.5.3, 1.5.3.1 Mobile Theme (299kB)
1.5.4, 1.5.4.1, 1.5.5, 1.5.5.1, 1.5.6, 1.5.6.1, 1.5.6.2, 1.5.6.3, 1.5.6.4 Mobile Theme (291kB)

The themes all require vQmod. The versions available here have been tested against the corresponding Opencart version (versions for 1.5.1, 1.5.2.1, 1.5.3.1 and 1.5.4 tested against every page).

If you’re interested, here is a list of the undocumented changes between Opencart 1.5.x versions that I identified.

Tags:

88 responses to “Opencart 1.5 Mobile Theme”

  1. Andrei says:

    Very nice work. Can you post the download link for this? Do you have a version for 1.5.3.1? Thanks

  2. bigfan says:

    Great job. Thanks!

  3. Simon says:

    I’ve added a link to the theme file archive above, which has been tested against Opencart 1.5.2.1 and 1.5.4.1.

  4. ani says:

    do you have been make mobile opencart for 1.5.4.1? Thanks 🙂

  5. Simon says:

    Not yet…if you want to have a go yourself start with the version for 1.5.2.1. I haven’t yet had time to work through 1.5.3.1, but it looks like there are far fewer changes between 1.5.2 and 1.5.3 then between 1.5.1 and 1.5.2. Haven’t been near 1.5.4 yet…

  6. Alberto says:

    Hi, i’m interested too =),
    i’ve the 1.5.3.1
    This mean the 1.5.2.1 Mobile Theme (298kB) may or may not work under 1.5.3.1?

    Anyway i’ve uploaded that files (and overwritten the header.php) but testing with OperaMobileEmulator nothing changed.. how to force Opencart to use sb_mobile_theme instead that the defaut , ONLY when the request come from a mobile? Thanks

  7. Simon says:

    Alberto

    Still working on a theme for 1.5.3.1 – the version for 1.5.2.1 will not work properly.
    This is just a theme, it doesn’t recognise a mobile browser. I use this on my own store by creating another store, and providing links for customers to navigate to the mobile store if they want. I’ll be adding an article about this shortly, plus also looking at some options for automatic redirection.

  8. Marciano says:

    Dear Simon,

    Im trying to use your module for opencart, but I get some errors. It says:

    Notice: Undefined variable: content_top in /usr/home/deb28769/domains/malova.nl/public_html/independentoutlet/upload/catalog/view/theme/sb_mobile_theme/template/common/header.tpl on line 48

    Now I tried to upload the file content_top from the default theme to the theme I used from you, but it doesnt seemtowork either.

    I downloaded 1.5.3, but I’m working with 1.5.4. May that be the problem?

    Thanks in advance!

    Marciano

  9. Simon says:

    I’ve now completed testing OC1.5.4 and the version for OC1.5.3.1 will work but for a minor issue on checkout and register.
    The error that you are describing sounds as if you may not have vQmod loaded on your site.
    Not sure how familiar you are with Opencart, but my theme includes $content_top as a child of the header, by making amendments via vQmod to the header controller. If this is not happening (because vQmod is not installed) then that would generate an error like you describe.

  10. Bhuiyan says:

    Great Job.Thanks

  11. Dynozor21 says:

    version 1.5.5.1
    I just uplaod it but when I go to my site via android on my mobile I see the normal version

  12. Simon says:

    The theme does not itself recognise mobile browsers. Have a look here for ways to implement the theme.

  13. Don says:

    Hi i tried it on opencart 1.5.4 and 1.5.4.1 vqmod installed both.
    And i get this error both of them (Notice: Undefined variable: language in C:\wamp\www\154\catalog\view\theme\default\template\common\header.tpl on line 52 Notice: Undefined variable: currency in C:\wamp\www\154\catalog\view\theme\default\template\common\header.tpl on line 53 Notice: Undefined variable: cart in C:\wamp\www\154\catalog\view\theme\default\template\common\header.tpl on line 54)
    What is the problem with this?

    Thanks for your answer!

  14. Simon says:

    Sounds like there’s something wrong with your installation there – language, currency and cart are normally displayed in header.tpl, so shouldn’t generate an error. Does your site function correctly with the default template without the vqmod xml file installed?

  15. ash says:

    hi,

    is there a way i can implement the theme, so it just switchs the theme, i have tried it with a m.domain and i would like just the one domain that changes the theme to this one if viewed via mobile

  16. Simon says:

    Have a look here for some options.

  17. Egbert Aarts says:

    Hello Simon,

    I have a 1.5.5.1 shop working perfect with and without vqmod installed. If I upload the Mobile theme I have the same kind of error mentioned by Don (13).

    Do you have any idea how to resolve this?

    Thanks in advance for any answers,
    Bert

  18. Simon says:

    Egbert

    Looks like this is my fault! The zip archive for OC154 contained files for an earlier version, which were causing the errors. I’ve refreshed the archive and it should be OK now.

  19. Egbert Aarts says:

    The problem is resolved, thank you very much.

    Bert

  20. Egbert Aarts says:

    It took me some time to figure out how to get this to work but with reading your instructions I got pretty far. Did some modification because at this moment I am only using the information part of the mobile shop. Had some problems to get multi shop working. The problem was caused by a 301 forwarding from root to the shop directory I had placed in my .htaccess file. Changed this in a rewriterule and everything worked fine. Mobile Browser Detection I get accomplished through the .htaccess file. ( http://detectmobilebrowsers.com – klik on Apache for the code )

  21. Egbert Aarts says:

    Hello Simon,

    I am experimenting now with product and catgories. I have now a problem with products where you have to make a selection. If I click on order nothing happens. I have to click the product name, make the selection and then hit order.

    Is it possible to change this?

    Bert

  22. Simon says:

    Bert

    I’m not seeing this behaviour. On my test system, clicking Add to Cart on the Canon 5D goes to the product page with a prompt. Are you seeing any js errors in your console?

  23. Egbert says:

    Thanks for all the assistance in getting this Mobile shop up and running. Everything seems to work fine, the only problem I have now if I order with my Samsung Smartphone that in the checkout the Continue Clicks are not allways visible. It seems the next menu sits on top them.

  24. Simon says:

    Hi Bert

    Interesting. Just tried it on an iPhone and I don’t see an issue. A family member has a Samsung, I’ll try it on that and let you know.

  25. Egbert says:

    It seems the problem is my Opera Mini Browser. If I use the standard browser my Samsung comes with there is no problem.

  26. Simon says:

    Right, I’m seeing the same in Opera Mini. In fact, using it on checkout I cannot immediately see the ‘Existing Customer’ option. I suspect this is javascript related – Opera Mini is very cut down (which is partly why it’s fast) but does some odd things with js. I will try and have a look at this but it may not be possible to fix.

    In fact, the default theme also has similar problems with the checkout page. It’s definitely the ajax calls on the checkout page that are causing the issue.

    LATER: I had a look at Opera Mini this afternoon and in fact I think the issue relates to the slideDown() which Opencart uses on the checkout screen after the ajax call. I think that somehow the page is rendered at the point where the slideDown() has not yet completed, with the result that the bottom of the checkout section is cut off.

    I’ve experimented by simply speeding up the slideDown by changing slideDown(‘slow’) to slideDown(‘fast’) throughout view/theme/sb_mobile_theme/template/checkout/checkout.tpl (and similarly for slideUp()). I’ve not seen the cutoff issue since doing this.
    You might want to give that a try – if you do, let me know what you find.

  27. Thang says:

    Dear Simon

    I have installed your theme ver 1.5.5.1. ajax cart run perfect in product page. But i don’t khow why ajax cart not update when i click “add to cart” button from category and feature module. and notify line don’t show too

    in your 1.5.5.1 zip file not contain m_common.js file. i had try use this file in previous version zip. but it not running.

    Please help. Thanks in advance for your answer.

  28. Simon says:

    What you describe sounds like it might be caused by the absence of the m_common.js file. This was missing from the archive last week, but fixed on 19 June – if you download the archive again it should be included.

  29. Thang says:

    My problem has been resolved. thank you

  30. Don says:

    Dear Simon,
    Can you help me to put back the shipping estimate?

    Thanks your work!

  31. Simon says:

    Don

    If you want to have a go at this yourself, then you can just edit the appropriate template file. There should be no need for any changes to any other file.

  32. Admin says:

    I’m successfully installed your theme in my test server :- http://www.ebozar.tk but it is not properly functioning in JAVA phones and some low end phones. How can i solve it?

  33. Admin says:

    How can i make my subcategory in drop down system in main category? Please help me. Search gadget is missing in your template, how can i display it in my site?

  34. Simon says:

    I’m not sure what you’re asking about the subcategory I’m afraid.
    I deliberately excluded the search capability from the theme as I was aiming for a streamlined version for use on mobiles. You could include it fairly simply by creating an edited version of template/product/search.tpl

  35. Admin says:

    In desktop site where the subcategory display in drop-down style, i want to show my subcategories in a extra page when i click in main categories in my mobile theme as like the yepme or flipcart.
    Please give me the code or file by which i can add a search box under the company logo.

  36. Simon says:

    Unfortunately the theme does not allow displaying subcategories like this, and as I explained before, doesn’t include a search capability. You are welcome to create this yourself, but I have no plans to add either of these.

  37. Admin says:

    I’m going to change my site theme to RGENESIS theme of themeforest.net . Will it make any problem in my mobile site where i’m using your mobile theme?

  38. Simon says:

    No, it should be fine.

  39. Tim says:

    I recently was informed the mobile site is blank. I have made no changes to the site, other than updating the software in CPANEL to 1.5.6.1 it was 1.5.6. I have checked settings, nothing seems to have changed, is there a compatibility issue with this update?

  40. Simon says:

    Tim

    I haven’t tested in OC1.5.6.1. The rest of your site looks OK, it’s just the home page that has no content. I’ll load up a test version of OC1.5.6.1 and try it myself.

    EDIT:It works fine on a fresh install of OC1.5.6.1, so I’m not sure what’s causing your problem. Do you get any errors in the Error Log?

  41. Tim says:

    I found the problem, while finding another issue. I purchased a module for expiration dates, to pull the items off the page. When adding new products, this field was gone. I noticed it said VQMOD wasn’t installed, I clicked the link to install it, and now the fields work as well as the mobile site too. I thank you for your time.

  42. cool says:

    After install RGENESIS theme and your theme, i got these errors:-
    Notice: Undefined variable: currency in /home/u807805404/public_html/catalog/view/theme/sb_mobile_theme/template/common/footer.tpl on line 35Notice: Undefined variable: language in /home/u807805404/public_html/catalog/view/theme/sb_mobile_theme/template/common/footer.tpl on line 36
    in your theme, how can i solve this/

  43. Simon says:

    Either you haven’t loaded the vQmod file, or something in your theme is interfering with it, at a guess. Do you see any errors in your vQmod.log?

  44. cool says:

    I already installed vqmod but problem still have.

  45. Simon says:

    Are you using the right version of the mobile theme for your site? Have you loaded the vqmod file from the zip? If so so you see any errors in vqmod.log? And in your Opencart system log?

    If there’s nothing odd in any of these then there’s nothing much else I can offer without access to your site.

  46. cool says:

    I send the access link through your contact us link. Please check my site and give me the solution. I want to run my site with RGENESIS desktop theme and your mobile theme in mobile browser. Please disable the mobile view system of RGENESIS theme and tell me how can i do this.

  47. Simon says:

    The problem is almost certainly being caused by your RGENESIS theme. If I view catalog/controllr/common/footer.php this has been amended directly from the standard version to include a child module called rgen_theme. This is interfering with the vqmod file for the mobile theme which adds the currency and language modules as child modules as well.I have directly edited the footer.php file which removes the error, but if you have edits to your other controller files from your theme it’s possible other errors may occur.

  48. cool says:

    Is there any problem between rgenesis mobile view and your mobile view? Please give me the edited files of my site.

  49. Simon says:

    I cannot say one way or the other in the rgenesis theme, I’m afraid – I have no idea what it does or how it works. The amended file is on your server.

  50. cool says:

    Please give me a file by which i can show search option in your theme on my mobile site. Many clients ask and suggest me to ad search features.

  51. Simon says:

    As it says above, I haven’t included search in the theme.

  52. cool says:

    How can i put search in my theme?

  53. Simon says:

    You would have to create an edited version of search.tpl, as my earlier answer.

  54. Ajay says:

    SEO url not supported for mobile theme, running on subdomain as per your tutorial.

    .htaccess
    RewriteEngine On
    RewriteBase /shop/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)\?*$ index.php?_route_=$1 [L,QSA]

    what changes are required for mobile theme. Before seo url activation its working properly now a got Internal server error on category and product pages, still cart and checout pages are working.

  55. Simon says:

    The mobile theme makes no changes to .htaccess. What version of OC are you running?

  56. ajay says:

    I m using ver 1.5 of OC.
    SEO url are comes in product page but when i click it shows internal server error.
    instead of it, if i am typing url in default method product detail page working.
    please check:
    http://m.stayonpowercapsule.com/power-capsules/power-capsules-30-pieces [Not working ]

    http://m.stayonpowercapsule.com/index.php?route=product/product&product_id=48 [ works ]

    can we change url format in your theme to display default format of url, while SEO urls are running with main store.
    stayonpowercapsule.com

  57. Simon says:

    Do you mean version 1.5.0? If so then I have not tested the theme against that version, which may be why the problem is occurring. If it is 1.5.0, then I’m unable to help further. If it’s 1.5.1 or later then there shouldn’t normally be a problem. Does you main theme make any changes to controller files?
    You cannot set SEO URLs by store, no.

  58. Josh says:

    Hello Simon, i get the following error when i applied your mobile theme Parse error: syntax error, unexpected ‘}’, expecting ‘)’ in /home/galaxy007/public_html/educhirve.com/vqmod/vqcache/vq2-catalog_controller_common_header.php on line 165
    pls, can you look into this, i really need the mobile theme. my OC version is 1.5.2.1

  59. Simon says:

    Josh
    I cannot recreate this error. Do you have any other mods running which might be interfering with the mobile theme? Have you loaded the correct version of the mobile theme for your version of OC?

  60. Josh says:

    i don’t have an extension that might interfere, and i downloaded the file for OC 1.5.2.1 from opencart extensions. is the file you uploaded to OC extensions error free?

  61. Simon says:

    I haven’t uploaded this to Opencart – I assume you’ve downloaded it from my site? I’ve rechecked with the same file and get no errors. If it’s still erroring send me the file that reports the error (simon@simonbattersby.com). My version of that file does not have 165 lines, so there’s something odd somewhere.

  62. Alavar says:

    Great job!
    Thank you so much Simon

  63. Harjo says:

    Hi Simon. i try your mobile theme using openchart 1.5.4, vqmod ver 2.1.5, and i get this error message
    ========
    Notice: Undefined variable: content_top in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_header.tpl on line 60
    Notice: Undefined variable: is_home in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_header.tpl on line 61
    Notice: Undefined variable: is_home in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_footer.tpl on line 1Notice: Undefined variable: currency in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_footer.tpl on line 27Notice: Undefined variable: language in /home/k6489505/public_html/vqmod/vqcache/vq2-catalog_view_theme_sb_mobile_theme_template_common_footer.tpl on line 28
    ======

    can you please help me to look whats wrong in here
    thank you
    best regard

  64. Simon says:

    That sounds like you don’t have the xml file loaded correctly.

  65. Hello,

    The vQMod affects the default theme’s controllers. It should not, as the non mobile theme gets affected by those changes too.

  66. Simon says:

    Dario
    The controller files need amending to make the mobile theme work. They do not adversely affect anything in the default theme. If your theme experiences problems there is nothing I can do – I’d respectfully suggest that your theme is what needs amending.

  67. Hello again,

    In the 1.5.6.X theme version, I have noticed how the “catalog/controller/account/account.php” file vQMod entry seems duplicated, including the same operations on the same search strings. Is it a bug?

  68. Simon says:

    It doesn’t need to be in there twice, you’re right, but it shouldn’t cause any problems.

  69. In “catalog/controller/checkout/cart.php” the search string is: “private function validateCoupon() {“. However in my 1.5.6 OC install, the function is declared as: “protected function validateCoupon() {“.
    I’ve just removed the access qualifier since “function validateCoupon() {” would still yield an unique string match.

  70. Simon says:

    Good spot – must have changed in OC1.5.6. I’ll amend that.

  71. Admin says:

    My previous problem about language issue is solved in website. But still not solved in mobile version. Still i can’t see any language select option in my mobile site. Please sir help me.

  72. Simon says:

    It’s impossible to know what’s going wrong without access to your site. If you’re prepared to pay for my time then I’ll take a look, otherwise I’m afraid you’re on your own.

  73. Ajit says:

    does it support 2.0.2.0 version ?

  74. Simon says:

    No, since OC2 ships with a default responsive theme.

  75. As a thank you for this outstanding theme, I’ll post here a little improvement, good for multi-lingual websites. I’ll add some screenshots (can’t really put PHP code in here) about how to make the “Product added to cart!” message translated in the proper language. The vQMod development “IDE” being shown is the awesome vQModerator. Just copy the various bits in your own development environment to get the same result.

    Step by step procedure for OpenCart 1.5.6:

    1) Open mobile_theme.xml (provided with this theme) and locate the catalog/controller/product/product.php entry.

    2) Add a new Operation and fill it as shown below:
    http://i.imgur.com/OXcZlBn.png

    3) Locate catalog/language/english/product/product.php and edit it until it shows as follows:
    http://i.imgur.com/OKP9R6k.png

    4) Add as many specific languages translations as you want. Example for Spanish:
    http://i.imgur.com/Mc8WIOu.png

    5) Create a vQMod file to edit:
    catalog/view/theme/sb_mobile_theme/template/product/product.tpl

    6) Inside it, add a section as follows:
    http://i.imgur.com/pWqrqu7.png

    That’s it! Now on your multi-language website all the messages will appear properly translated!

  76. Simon says:

    Thanks very much Dario. When I have some time I will incorporate those changes in the download.

  77. Hoàng Nguyễn says:

    How to add Search to this theme, help me pls!!

  78. Simon says:

    I have not included Search in the theme, sorry.

  79. Hoàng Nguyễn says:

    My store has more than 3000 products, the SEARCH is very important, can you help me to add Search to this theme, pls !!!

  80. Simon says:

    Hoang
    Take a look at http://oc1564.simonbattersby.com/. I have added search to the bottom of the homepage. I’m open to feedback. If this is what you’re after I will make the files for OC1.5.6.4 available in the download.

  81. Jack Max says:

    I want the version of 2.0.3.1. Please upload in your website.

  82. Simon says:

    Not sure why you would need this for OC2.x since the default theme is responsive. I have no plans to rewrite the mobile theme for OC2.x.

  83. Oleg says:

    Punicode: xn--80abvmcjd9i3a.xn--10-6kc1afkcxgu.xn--p1ai
    Version ocStore 1.5.5.2. A lot of the same mistakes!
    Undefined variable: data in home/r/romah16j/mobi/public_html/vqmod/vqcache/vq2-catalog_controller_common_header.php on line 140
    Can I somehow fix it?

  84. Simon says:

    Not sure what’s happening there to be honest. I suggest a complete reinstall and see if the issue goes away. If it remains, then it might be other extensions interfering with the mobile theme.

  85. Vagos says:

    Hello. I want to display all categories at the home page, not the ones show in the top menu of my main site. Could you help me.

  86. Simon says:

    You can’t do this out of the box with Opencart, it needs a bit of custom work. Get in contact if you’d like me to give you a quote for this. You might also find an extension that will do this for you.

  87. Bin says:

    Search box is verry important! How can I add search box? My OC is v1.5.1.2. Thank you.

  88. Simon says:

    If you download the version for OC1.5.6 that includes the search functionality which you should be able to adapt. I have no plans to include search in any other versions.

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.