Adding Shadowbox to Magento Ecommerce
Here is a tutorial on how to add the Shadowbox modal box to your Magento powered online store. For those unfamiliar with Magento, it is the latest and greatest in open-source eCommerce software. Varian has done the online communi-tay a great service by building a shopcart the right way, from the ground up. Thanks Varian! Granted, Magento has a strong learning curve, so those unfamiliar with basic HTML, CSS, or hacking at code… beware.
Parlez-vous français? Voici une traduction Google.
Magento Wiki offers the help of adding Lightbox2 to your Magento install, for those not interested in the Shadowbox Modal.
Step 01
Download Shadowbox. Go with the second download option. Just the files necessary to run shadowbox.
Shadowbox has been recently upgraded and restructured. This tutorial used the previous Shadowbox version structure. I’ve compiled Shadowbox how it used to be and created the proper directory structure as well. Please use this download link for your Shadowbox files.
As you are using this tutorial to add Shadowbox to a site that obviously is for commercial purposes, you’ll need to buy the Shadowbox Commercial License for $20.
Assuming that magento is installed in your root directory (yourdomain.com) -
From the root open the /js directory
yourdomain.com/js
Inside of the /js directory create a new directory named “sb” which is short for shadowbox
yourdomain.com/js/sb
Inside of /sb lets upload the 3 shadowbox directories /build, /images, and /src. So now on the server we should have:
yourdomain.com/js/sb/build
yourdomain.com/js/sb/images
yourdomain.com/js/sb/src
Step 02
Lets open your template directory and drop in the CSS file that comes with Shadowbox.
This tutorial will make use of the default template. So if you are not using the default template, you’ll need to exchange the default template name for your own template directory name.
The default template can be found here:
yourdomain.com/skin/frontend/default/default/
So now, you should have the CSS file named shadowbox.css in this directory:
yourdomain.com/skin/frontend/default/default/css/shadowbox.css
The Shadowbox CSS file can be found in /build/css/ of the shadowbox zip file that you downloaded.
Step 03
Lets open your template directory and drop in the images used by Shadowbox. Open your default template, open the images directory, and create a new directory named “sb”. Drop in the images that are found in the images directory of the Shadowbox download. So now you should have
yourdomain.com/skin/frontend/default/default/images/sb/loading.gif
yourdomain.com/skin/frontend/default/default/images/sb/loading-light.gif
yourdomain.com/skin/frontend/default/default/images/sb/overlay-85.png
Step 04
Now we need to modify the Shadowbox Javascript. Open up the javascript found at:
yourdomain.com/js/sb/src/js/shadowbox.js
Around line 81, lets replace
1 | loadingImage: 'images/loading.gif', |
with
1 | loadingImage: SKIN_URL + 'images/sb/loading.gif', |
And around line 131 lets replace
1 | overlayBgImage: 'images/sb/overlay-85.png', |
with
1 | overlayBgImage: SKIN_URL + 'images/sb/overlay-85.png', |
Step 05
Now lets modify the Magento template files and set them to use Shadowbox. Open up yourdomain.com/app/design/frontend/default/default/layout/page.xml
Around line 42, look for
1 | <action method="addJs"><script>mage/cookies.js</script></action> |
And insert this right after
1 2 3 | <action method="addJs"><script>sb/src/js/lib/yui-utilities.js</script></action> <action method="addJs"><script>sb/src/js/adapter/shadowbox-prototype.js</script></action> <action method="addJs"><script>sb/src/js/shadowbox.js</script></action> |
Scroll down around line 49 and look for
1 | css/menu.css |
After that, insert this:
1 | css/shadowbox.css |
Save and close.
Now lets open up yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml
In version 1.0 (1.1.1 below)
Around line 51 find this code:
1 2 3 4 5 | <?php foreach ($this->getGalleryImages() as $_image): ?> <li> <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a> </li> <?php endforeach; ?> |
And replace it with this:
1 2 3 4 5 | <?php foreach ($this->getGalleryImages() as $_image): ?> <li> <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="shadowbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a> </li> <?php endforeach; ?> |
version 1.1.1
Around line 51, replace this:
51 52 53 | <?php foreach ($this->getGalleryImages() as $_image): ?> <li><a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li> <?php endforeach; ?> |
with this:
51 52 53 | <?php foreach ($this->getGalleryImages() as $_image): ?> <li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="shadowbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li> <?php endforeach; ?> |
This just adds the rel=”shadowbox[rotation]” call to the anchor tag, to let shadowbox know that we are summoning its powers. Save and close.
Now lets open the file yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml
Lets replace
1 2 3 4 | <script type="text/javascript"> var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>'; var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>'; </script> |
With this
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>'; var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>'; var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>'; </script> <!-- Added Shadowbox --> <script type="text/javascript"> window.onload = function(){ Shadowbox.init(); }; </script> <!-- end Added Shadowbox --> |
Save and close.
Enjoy The Fruits
And now shadowbox should be fully functional for your product images. If you run into any problems, feel free to post questions or comments here.
And don’t forget to tip the man for his Shadowbox work!








June 21st, 2008 at 9:13 am
Chad,
Shadowbox looks great and the tutorial seems very instructive too !! But I am seeing a lot of these and had some questions -
How to decide on lightbox or lightwindow or shadowbox
Will this cause any major impact on the page load time?
June 21st, 2008 at 9:52 am
Hi srinigenie,
None of these would really cause “major” impact on the load time, but as lighbox and lightwindow both require the prototype framework, shadowbox would probably be the lightest load.
You can do the math, by finding out the file sizes of each modal box, and finding out which is the lightest. But really… they aren’t that big.
June 22nd, 2008 at 11:49 pm
thanks, Chad
your tutorial was very helpful
June 23rd, 2008 at 12:31 am
Glad to help.
June 23rd, 2008 at 4:55 am
Good work! Very good explanation!
June 23rd, 2008 at 7:19 pm
Took me a while to figure out why it wasn’t working for me, … System > Cache Management> Refresh Cache. All good, thanks Chad
June 23rd, 2008 at 9:33 pm
Good call. Thanks Jeff.
June 23rd, 2008 at 10:12 pm
Hi Chad,
thanks for your tutorial, great work! It saves us a lot of time.
June 24th, 2008 at 4:34 am
Nice rundown. I just started checking out Magento today. Was a little disappointed to see that image resizing slider, especially since everything else seems so well designed in Magento. I’ll definitely be back here when implementing the modal box.
June 26th, 2008 at 12:53 pm
Seems that I’m having 2 problems. Followed your instructions to a T, but it seems that the “loading.gif” is not loading properly. Getting an X instead of the loading image. Also, this doesn’t work in firefox. Can that be fixed?
June 26th, 2008 at 1:55 pm
Hi Russ,
I went into my demo cart to check into this. The loading image works for me in FF2 and FF3, and it shows a broken image link in IE7. This most likely has to do with the javascript “SKIN_URL +” that calls the default theme image directory. I guess IE7 doesn’t like it.
It’s strange to me, that the working browsers differ between you and I. Not entirely sure why that is.
The other option is to input an absolute address to the images in the shadowbox.js
Open the file yourdomain.com/js/sb/src/js/shadowbox.js
See Step 04. Instead lets replace
loadingImage: 'images/loading.gif',withloadingImage: 'http://yourdomain.com/skin/frontend/default/default/images/sb/images/loading.gif',and
overlayBgImage: 'images/sb/overlay-85.png',withoverlayBgImage: 'http://yourdomain.com/skin/frontend/default/default/images/sb/images/sb/overlay-85.png',Or you could always just drop the images in yourdomain.com/js/sb/images/loading.gif so that you dont need such a long absolute url.
Hopefully that should be a work around for getting the loading image to show. I’ll have to look into a better javascript call to the theme directory.
June 27th, 2008 at 12:23 pm
found the problem. seems i had placed the shadowbox.js file in the /js/sb/ folder instead of in the /js/sb/src/js folder. so the problem is fixed for firefox, yet like you said IE 7 displays an X. so our problems are now displayed the same.
Still shows an “X” even with an absolute address. But works great in FF.
Fantastic addition to the Magento community and I really appreciate the addition.
A bit off track, but do you know of a way to implement this in the catalog view using an inline popup. Meaning when browsing a category and hovering over a product, you could choose a button “Quick View” that would open the product page in an inline page. Probably overstepping what you have already contributed, but this would be a fantastic addition.
Thanks again for all your help.
June 27th, 2008 at 3:40 pm
Hi Russ,
heh…. I’m not gonna lie, I read over the tutorial and found I had forgotten the /src/js/ in that address. So it was my mistake. sorry. the tutorial has since been corrected.
As far as adding a shadowbox popup of the large image in the category list view, open up the file list.phtml from
yourdomain.com/app/design/frontend/default/default/template/catalog/product/list.phtmlthis file shows the list view and grid view used in the default template. so you’ll need to input this code twice. once in the grid section, and once in the list view section. just search that file for call to the image, and include this code with whatever styling you may want for it.
this will add a (view detail) link, that will popup the large image in shadowbox.
June 27th, 2008 at 8:57 pm
You’re the man!
However, I’m getting syntax errors from magento. Have you tested this code? Or am I just adding it to the wrong section? I put it after around line 95.
I appreciate everything.
Russ
June 27th, 2008 at 9:02 pm
I get the following error:
Parse error: syntax error, unexpected ‘=’, expecting ‘,’ or ‘;’ in /myurl/app/design/frontend/poker/modern/template/catalog/product/list.phtml on line 98
June 28th, 2008 at 1:42 am
I’ve tested this, so I know its good. What do you have for line 98?
I pasted that code right under the call to the image.
June 28th, 2008 at 6:52 am
If I use:
$this->helper
on both lines instead of:
$this- rel=”nofollow”>helper
then the image pops up but without using shadowbox. any ideas?
June 28th, 2008 at 11:07 am
Yea, sorry bout that. WordPress automagically inserted that re=”nofollow” in there, and it fubar’d the code up. I guess my code plugin only works for posts and not comments. Just strip that rel=”nofollow” out, and you should be good to go.
Also be sure to click the “View Code” button when copying the code. As long as you keep the rel=”shadowbox” inside the anchor tag, it should call shadowbox.
You might need to add the rel=”shadowbox” to the anchor tag after the “else”. I’m not seeing it in that above code I gave you.
June 28th, 2008 at 2:21 pm
Yeah, I’m not sure.
I added the rel=”shadowbox” within the else anchor and it still doesn’t call upon shadowbox.
Thanks for all the help.
Russ
June 29th, 2008 at 2:33 am
Great tutorial, worked like a charm on the first go around with no errors. Thank you.
June 29th, 2008 at 6:17 am
Chad,
My bad. It does work perfectly. The original Shadowbox tutorial I worked on in the Default/Modern template. And I did the Shadowbox View Detail tutorial under the Default/Default template. Works great! Thank you for all the help!
Russ
July 8th, 2008 at 8:21 am
Doesn’t seem to work for me - although there was no /lib/yui-utilities.js in my shadowbox download.
In fact, the structure just seems to be different to what you were mentioning. Like, there wasn’t another js folder in sb/src/.
July 8th, 2008 at 8:32 am
Indeed. It appears that Michael just recently upgraded the script to 2.0, and has added the option of choosing which framework to use. Some big directory restructuring has been done.
I’ll have to ask him to include the previous version for download, in order to keep this tutorial good.
July 8th, 2008 at 8:54 am
Thanks for the feedback Chad.
Any chance of you uploading the files you worked with, so then you’re never going to come up with this problem again. Obviously, making sure people pay the $20 if they use it on a live commercial site.
July 8th, 2008 at 9:10 am
Hi Gary,
Files are up.
July 8th, 2008 at 9:18 am
Awesome work. Thanks!
July 8th, 2008 at 9:21 am
p.s. Your portfolio link doesn’t work.
July 8th, 2008 at 9:27 am
You bet. Heh, yea, I’m still kinda workin on this place as I find time. My moonlighting site is at frontierwebdesign.com
July 8th, 2008 at 9:41 am
Nice. I see you have a few sites. A family one too!
Thanks for the help in getting it to work. It seems fine now.
July 17th, 2008 at 7:50 am
Chad, Thanks for for sharing this tutorial. Worked like a charm. You should definitely add this to the Magento wiki.
July 26th, 2008 at 6:12 pm
Step05
Around Line 51 of
yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml
now appears different in latest magento 1.11
July 28th, 2008 at 9:53 pm
Thanks Jeff. I’ve added an update, that includes version 1 and 1.11.
If you compare the code, you’ll see that basically, we’re just adding the rel=”shadowbox[rotation]” call to the anchor tag, with a minor change to the href.
July 31st, 2008 at 7:31 pm
the guide is bad.
path him some files they don’t coincide with the zip of shadowbox and besides the method is not proper for those that have a multistore.
The relative paths are especially problematic in cms as Magento
August 1st, 2008 at 3:22 am
ok sorry. I have read the guide in magento-wiki, don’t this.
August 11th, 2008 at 6:44 pm
Really good explanations! A lot better than many Wiki on Magento official website!
Thanks a lot Chad!
August 27th, 2008 at 1:40 am
I’ve installed sb on my Magento 1.1.3 installation. Everything works fine exept the ‘Close’ button isn’t shown. The loading image, previous and next buttons are there but no close option. Have I missed a step or are there more people with this problem?