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: opencart
I’ve practically told you already:
.links a{color:#333333}Unable to do it Sir. Please give me the code and insert instruction.
Set
colorfor.links a.Sorry to disturb you again. How can i change the font colour of nav bar (Home, Shopping Cart, My Account Buttons)?
Have a look here.
Unable to do it. when i changed it to image, only color is gone. What is code for image setting?
Set
background-imageon#headerin the css, replacing thebackground-colorsetting.How can i insert a picture instead of color in header of the theme?
If you’re prepared to pay for my time let me know, but otherwise no.
Please i’m going to use the GAZAL theme but i also want your mobile template. I request you please help me.
Sorry, I’m not prepared to make alterations to fit in with another theme.
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.