Responsive osCommerce now a reality, using Bootstrap

By | April 6, 2014

For the last couple of months a small team of coders has been working on updating the shop side of osCommerce to be responsive…

What is responsive?

Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

In easy to understand terms, the site changes “shape” if you visit in a mobile phone compared to an iPad compared to a desktop computer.

With that in mind, we had a lot of recoding to do, we pretty much pulled apart the cosmetic look of normal osCommerce and updated it to Responsive osCommerce. Have a look at the responsive version and see how it changes shape depending upon which device you are viewing it in…

Going so in-depth into the code, I also took the opportunity to update a few areas to make them more modern;

The Footer area (which is now modular and controlled from the Admin)


The Reviews (which has a top-down bottom-up overhaul)


The Header area (modularisation mostly implemented)


Other bits and pieces new to this version;

  1. New Category Tree Class
  2. Updated checkout experience
  3. New Card Icons
  4. New Infoboxes (contact us, generic text, customer services)
  5. Grid / List switching in category display
  6. and too much more to list…


Another important factor in todays online experience is the speed at which your page displays to your customers. We put together this version to be as fast as we could make it. Using “Gt Metrix” to test our changes we saw a great result:


Go ahead and try your own osCommerce site and compare your results…you’ll be shocked at the difference.

Changing the look of the site

Pretty much how osCommerce has always been as we did not yet have the time to build in a template system. With just a few changes to around 4 core files I built this:

large view

small view


I’m really pleased with how this project turned out. Shopowners now have a choice to use the normal 2.3 series osCommerce or to use the new Bootstrapped 2.3. It is possible to upgrade an existing osCommerce shop from normal to Bootstrap, and this Bootstrap version has a massive advantage in that all of the existing addons are useable with it.

So, have a look at the test site. Feel free to fork the codebase or to download the master zip. Install as you would any osCommerce, then go into Admin and turn on the relevant boxes that you would like to show and relevant Header Tags.


21 thoughts on “Responsive osCommerce now a reality, using Bootstrap

  1. arlisabijoux

    Hi Gary, very interesting and above all amazing speed! great work, congrats!

    I need to seriously consider upgrading my shop to use BS (if at all possible).

    One question…..I do notice on some responsive sites that when I view them on my phone they become a sort of simplified version of themselves and lose a lot of fonctionality (amazon and ebay for example), so I usually end up viewing the classic site.

    So does your BS version force a specific view, for example on your phone, or can the viewer still choose to view the classic version instead?

  2. Gary

    Hi Isa – going responsive is definitely the way to go. Looking at a lot of stats over the past few months of a lot of different websites that I look after shows about a 35% segment of people using mobile/tablet. And that number can only get bigger as the months and years go by.

    Your site would be relatively straightforward to update as your design is quite a nice layout to make responsive. Certainly worth doing at some point.

  3. Daniel Klejnstrup Sørensen

    Is all this totally free to use?
    What about the graphics? That’s not stock osc, is it?

  4. Siahguy

    Nice work! One little glitch I noted – in Opera (so presumably webkit, but haven’t tried it), the bottom left item on the homepage bumps into a new line. Not sure if you’ve noticed that.

  5. Gary

    Could you please provide a screenshot into the thread at the osCommerce forum, thanks.

  6. jimdavis007

    I tried it and for some reason it looks nothing like the sample. I have looked for these extra modules that need activating and cant find them. What am I doing wrong?
    Also you wouldn’t happen to be giving away the code for that green template would you. I like it like that 🙂

    Basically there is no header or footer.

  7. Gary

    You need to install the header and footer modules. admin > content > modules.

  8. Roger

    How would you implement the responsive osCommerce to an already existing osCommerce website?

  9. ScaliseMarine

    I have been searching everywhere for a way to upgrade my OSC Max sites (ver 2.5.4) to a responsive template but keep running into version discrepancies, such as files that are to be modified are non-existent in OSC Max or located in a different location. Will this version work with OSC Max without major modifications (I am not a coder)?

  10. Gary

    osCmax is based on an -ancient- version of osCommerce, even the latest release is based on osCommerce of over 6 years ago!

    There would be no chance of using this on osCmax.

  11. ScaliseMarine

    Good to know, I was not aware of this. Thanks for your help.

  12. Giles

    osCmax is based on the 2.2 osCommerce. Work is underway to release a responsive template.

  13. bram

    Please help us with converting this to oscmax.
    With or without the developers of oscmax.
    Did send you an email about this.
    Thanks in advance.

  14. Anne

    Hi, Gary

    Saw a piece in the text New Infoboxes (contact us, generic text, customer services)

    Generic text like generic infobox where you can put html code or php code in it. ?

    If so, don’t see a module for it.

    Greetings, Anne

  15. Omar

    Hi Gary,
    How to install responsive osCommerce(bs) to an already existing osCommerce 2.3 website?

  16. Gary

    Hi. 3 options:

    1. integrate yourself by comparing your files with the bootstrapped files
    Upside: no cost, keep addons
    Downside: Take a long time

    2. start over with bootstrapped (along with your existing database)
    Upside: no cost
    Downside: Lose any addons you might have added

    3. have an expert update your site
    Upside: keep site, keep addons
    Downside: cost

  17. Josibel

    Hola Gary, esta versión puede trabajar con el idioma español? Utilicé un paquete y no realizó la traducción.

  18. Gary

    Hello Josibel.
    You would need to make a copy of the english language folder, and then translate it all into Spanish.

Leave a Reply

Your email address will not be published.