Adding Shadowbox to Magento Ecommerce

June 20, 2008

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.

Shadowbox for Magento.

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

?View Code JAVASCRIPT
1
loadingImage:       'images/loading.gif',

with

?View Code JAVASCRIPT
1
loadingImage:  SKIN_URL + 'images/sb/loading.gif',

And around line 131 lets replace

?View Code JAVASCRIPT
1
overlayBgImage:    'images/sb/overlay-85.png',

with

?View Code JAVASCRIPT
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&phpMyAdmin=410c4af8e9e6t1397404 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&phpMyAdmin=410c4af8e9e6t1397404 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&phpMyAdmin=410c4af8e9e6t1397404 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!

Tags: , , , ,

Was this Post helpful? Please consider a small contribution.

My Amazon.com Wish List
Pypal Tip


76 Responses

Comments

  1. srinigenie

    June 21st, 2008

    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?

  2. 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.

  3. thanks, Chad
    your tutorial was very helpful

  4. Glad to help. :)

  5. doctorlogos

    June 23rd, 2008

    Good work! Very good explanation!

  6. Took me a while to figure out why it wasn’t working for me, … System > Cache Management> Refresh Cache. All good, thanks Chad

  7. Good call. Thanks Jeff.

  8. Hi Chad,

    thanks for your tutorial, great work! It saves us a lot of time.

  9. 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.

  10. 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?

  11. 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', with loadingImage: 'http://yourdomain.com/skin/frontend/default/default/images/sb/images/loading.gif',

    and overlayBgImage: 'images/sb/overlay-85.png', with overlayBgImage: '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.

  12. 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.

  13. 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.phtml

    this 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.

    1
    2
    3
    4
    5
    
    	<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
    (<a href="<?php echo $this- rel=&phpMyAdmin=410c4af8e9e6t1397404&phpMyAdmin=446c4b004362t3f340eda"nofollow">helper('catalog/image')->init($_product, 'image'); ?>" rel="shadowbox" title="<?php echo $_product->getName();?>">View Detail</a>)
    	<?php else: ?>
    (<a href="<?php echo $this- rel=&phpMyAdmin=410c4af8e9e6t1397404&phpMyAdmin=446c4b004362t3f340eda"nofollow">helper('catalog/image')->init($_product, 'image'); ?>">View Detail</a>)
    	<?php endif; ?>

    this will add a (view detail) link, that will popup the large image in shadowbox.

  14. Russ Dyer

    June 27th, 2008

    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

  15. Russ Dyer

    June 27th, 2008

    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

  16. 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.

  17. Russ Dyer

    June 28th, 2008

    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?

  18. 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.

  19. Russ Dyer

    June 28th, 2008

    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

  20. Great tutorial, worked like a charm on the first go around with no errors. Thank you.

  21. Russ Dyer

    June 29th, 2008

    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

  22. 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/.

  23. 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.

  24. 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.

  25. Hi Gary,

    Files are up.

  26. Awesome work. Thanks!

  27. p.s. Your portfolio link doesn’t work. :(

  28. You bet. Heh, yea, I’m still kinda workin on this place as I find time. My moonlighting site is at frontierwebdesign.com

  29. 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.

  30. Chad, Thanks for for sharing this tutorial. Worked like a charm. You should definitely add this to the Magento wiki.

  31. 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

  32. 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.

  33. Black Cat

    July 31st, 2008

    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

  34. Black Cat

    August 1st, 2008

    ok sorry. I have read the guide in magento-wiki, don’t this.

  35. Own Security

    August 11th, 2008

    Really good explanations! A lot better than many Wiki on Magento official website!

    Thanks a lot Chad!

  36. combicart

    August 27th, 2008

    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?

  37. pixelpusher

    September 2nd, 2008

    The update to 1.1.4 has broke my shadowbox integration. will this happen with every update?

  38. Just a problem with the closebox that doesn’t appear

  39. hi there,

    I am using Magento ver. 1.0.19870.4

    I am trying to make the required changes to
    yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml

    However this is the only code in the file…which is significantly different to what the tutorial says is in it!

    getCssJsHtml() ?> getChildHtml() ?> helper('core/js')->getTranslatorScript() ?>

    I tried adding the code in the tutorial however it did not work.

    Please can you help :)

    Callum

  40. Great! You’re the best!

  41. I am running Magento 1.1.6 and was wondering if there are any changes I need to know about before adding this to my web?

    My first run was unsuccessful as my header gave me a Blank and SKIN error.

    Rick

  42. I am using magento 1.1.8

    Error:

    Warning: simplexml_load_string() [function.simplexml-load-string]: Entity: line 50: parser error : AttValue: ” or ‘ expected in D:\EasyPHP 2.0b1\www\magento\app\code\core\Mage\Core\Model\Layout\Update.php on line 293

    any idea?
    Thanks for all.

  43. Hey :)

    Absolutely great tutorial.

    On version 1.1.8, no joy. There are a few differences and I tried to work my way around them. However, it seems I’ve failed.

  44. Scratch that. Works wonderfully. I’m with Jeff on the cache.
    Coding is a little different still, but it’s intuitive.
    This method is still a go in 1.1.8 :)

  45. Hi ,

    firsty i’m sorry for my poor english, i’m french.
    I want to say thank you, it’s a very good work.

    I have a question :

    i don’t understood how to put an html page into a shadowbox.

    Example : i want to open a shadowbox with the login page when the user click on “addtocart”.

    Is it possible ?

    Thx a lot for your help, i spent 2 days between your website and the mickael jackson’s website.

  46. Hi Miko,

    That sounds to be a pretty big job. I don’t think you’ll find support for something like that. You may need to hire a developer to solve that issue. :|

  47. I have learned alot about magento web development from your site and wanted to say thanks for the tutorials. As far as future learning, I am really interested in using jquery with magento. Also, learning how to create custom queries and pulling specific data out of magento to display on custom pages. My ultimate feat would be to learn how to create a popular feature known as “quick view.”

    It can be seen on big name retailers websites like http://www.ae.com or http://www.moosejaw.com. On a category page, mouseover a product image and you will see a link “quick view” and it will popup a modal box with the product view page loaded into it.

    Another feature I would like to learn to implement into magento is the main top navigation system on the aforementioned websites.

    I hope this helps to find future articles to write about. Thanks and keep up the great work.

  48. Hi,

    Thank you for this tutorial, it works good with magento 1.2.1.

    However, there is a small problem, posted above, but without solution. There is no close button for the shadowbow opened picture. So ok, the esc key do the job, but this is not very good for unexperienced users.

    I already used shadowbox, and normally, there is a close button on the bottom right corner…. Where is it ?

  49. I have run into the no close problem as well with the latest magento release.

    Have not found a solution thus far.

    Any ideas?

    Cheers.

  50. Hi,

    Nice tutorial but it would be cool to have the same with a recent shadowbox 2 package. The old one is deprecated and I wouldn’t install a deprecated package in a new website.

  51. Same here. All good on v1.2.1

    Except no close button on the shadowbox.

  52. Here is a quick fix for the missing close button issue:
    Create a folder named ‘images’ in the magento root
    put an image named ‘closebox.png’ in that folder (i just grabbed one from google images)

    The better way would be to change the code and place the image in an appropriate location. If you want to take that route, you should be looking near line 201 in shadowbox.css.

    Hope this helps.

  53. Thnx Chad for this tutorial it really helped me out!!!!

  54. I followed this tutorial but in magento 1.2.1.2 not working … using modified default design

    http://cp.nostresscommerce.cz/nase-sluzby-a-produkty/podpora-pro-magento/prirucka-ceskeho-uzivatele.html

    any ideas? thanks

  55. Hello and tx for the good job. I implemented shadowbox on the image gallery, but i’m stuck trying to replace the awful zoom thingie on the main image in product view by a nice shadowbox. Can you help?
    Thanks in advance.

  56. I HAVE A PROBLEM MY SHADOW BOX PLACE IN THE END OF THE PAGE NOT IN FRONT OF THE SCREEN.WHEN I CLICK ON THE PIC THE SHADOW BOX APPEARS END OF THE PAGE.I MUST SCROLL THE PAGE FOR SEEING THAT.
    ANYONE CAN HELP ME?

  57. You haven’t linked to your css file properly then, but the javascript is working ok

    double check you have uploaded the css files, and linked to them properly

  58. Thanks for the great tutorial. Works well with Magento ver. 1.2.1.2.

    Just wondering if anyone can solve this issue: I’m also wanting to use some javascript which adds a selected state to the nav but it conficts with Shadowbox so that it doesn’t function.

    The js is:

    function setActive() {
    aObj = document.getElementById(‘leftCol’).getElementsByTagName(‘a’);
    for(i=0;i=0) {
    aObj[i].className=’selected’;
    }
    }
    }

    window.onload = setActive;

    Any help greatly appreciated.

  59. Ok. Worked it out.

    Incase anyone else needs to know, Shadowbox is initiated using window.onload and so was my other javascript so they conflicted. You need to add them to the same function so that there is only one window.onload. Changed head.phtml script to:

    window.onload = initAll;

    function initAll(){
    Shadowbox.init();
    setActive();
    }

  60. great work, thank you very much

  61. Great Work, thank you

    This instruction is for installation of Shadowbox 2

    Shadowbox currently release Shadowbox 3.0b, which is IE8 compatible

    May I know whether there is installation guide for this?

    Thank you

  62. Thanks Chad for everything.

    I ask you a tutorial on how to create a Magento theme. step by step.

    and what are the tools and software that your suguieres.

    I hope it is possible for you.

    Thanks4All

  63. I wish I had a cool blog like yours. I would love to start one myself with Wordpress but I’m affraid I’d give it up too soon ^^’

  64. If anyone is having a problem with the close button, follow the steps below.

    Copy closebox.png from
    js/sb/images/closebox.png
    to
    skin/frontend/default/YOURTHEME/images/sb/closebox.png

    Next open
    skin/frontend/default/YOURTHEME/css/shadowbox.css
    around line 201 you should see
    background-image: url(images/closebox.png);
    change this to
    background-image: url(../images/sb/closebox.png);

    save and upload.
    refresh and enjoy your new close button.

  65. this is really a great effort. i helped me alote. i was wondering how to get skin url in javascript in magento and it really helped me. thanx Chad Coleman

  66. The link to download shadowbox doesn’t work anymore?

  67. My apologies. The DL link has been corrected.

  68. hi chad,

    iam newbie to magento, first of all let me thank u for such an awesome tutorial for shadowbox. i got an error after i followed ur steps the error is

    Parse error: syntax error, unexpected ‘=’ in /opt/lampp/htdocs/magento/app/design/frontend/default/default/template/catalog/product/view/media.phtml on line 71

    can u plz look into the error and let me know the solution for it

    regards

  69. It appears you’ve written some bad syntax, judging by the parse error. Check that line to see that you’ve written the code properly. It doesn’t know what to do with that “=” that you have in that line.

  70. hi chad

    thnx for the response, but unable to find the invalid “=” in line of code i’m sending the line that is giving plz look into the line and plz plz find the error. Desperately looking for the solution.

    <a href="helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” rel=”shadowbox[rotation]” title=”getName();?>”><img src="helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=”68″ height=”68″ alt=”htmlEscape($_image->getLabel()) ?>” />
    Regards

Trackbacks

Leave a Reply

Asking for support? Win favor with a contribution for my time and expertise.