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.







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.