E-commerce Module: Replace of fancy box in Opencart with the color box

I love the opencart but I am worried using the fancy box for image enlargement in the product details page, so I think to change the way to show the image enlargement with the use of the color box.

Download the following zip files, upload those files and folders in the root folder like in the image below:

download button


Go to the catalog/view/theme/default/template/product.tpl and place the code below, below the <?php echo $header; ?>

<link rel="stylesheet" href="colorbox.css" /> <script src="colorbox/jquery.colorbox.js"></script> <script> $(document).ready(function(){ $(".group1").colorbox({rel:'group1'}); $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>
module for free in opencart, image magnification
module for free in opencart, image magnification

Now find “facybox” and replace with the “group1” and save, then bingo, things works.

fancy color box for opencart
fancy color box for opencart

Features of ColorBox

  • Supports photos, grouping, slideshow, ajax, inline, and framed content.
  • Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
  • Appearance is controlled through CSS so it can be restyled.
  • Can be extended with callbacks & event-hooks without altering the source files.
  • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  • Preloads upcoming images in a photo group.

Find out the example how the colorbox works out as the fancy box with some extra things.


Previous articleHow to insert the You Save price in opencart 3? – Opencart 3 module free
Next articleHow to find the Opencart version that you are running?


Please enter your comment!
Please enter your name here