Using Lightbox for the whole web site

Go To


I was wondering if using Lightbox all over the site would be a smart idea.

We are developing an eCommerce site and the idea is to keep the user on the main page all the time and show all the content (Product Page, About us etc) in a Lightbox way.

I understand that in order to use Lightbox you'll need Prototype/JavaScript which are widely supported at most browsers, I'm also aware that Ligthbox on mobile is not really fun but we are going to create a mobile version anyhow, A few Qs:

  1. Do you think Lightbox might be heavy somehow? will it reduce site performance?

  2. Do you think there are going to be big compability issues?

Any other thoughts why that not such a good idea? Again, the main idea is to keep the user at the main page while he can browse 'less important'.

Thanks in advance.

2012-04-04 07:28
by eek


I think it's not a good idea to use lightbox massively to show relevant content for many reason

  1. Accessibility: you cannot rely only on javascript to access the information so you need to put much more effort to develop with progressive enhancement. How if I navigate products through the browser history?
  2. SEO: have you thought how to make your products retrievable by search engines? To make dynamic content indexable you will need again more extra effort. Consider also the possibility of being penalized for hidden contents on the page.
  3. Usability: How would you deal with multiple devices and screen resolution? What if you show the image product in a lightbox and then your customer ask to also show the zoom images in a lightbox too? Will you open nested lightbox?
  4. Social Network : "like" and "+1" are common functions on almost every modern e-commerce: but these actions can be performed only on a single URL, so if your products are not associated to a specific url (1 to 1 relation) you won't be able to share a specific item.

So, It's better to avoid all these complications
Use instead lightbox for giving alerts, show modal window and tell the user about the result of some server operation (e.g. Login/logout messages, alert the end of stock for an item during checkout...) and, in general, everywhere it's better not to completely change or break the navigation flow (e.g. registration, checkout,...), but definitely avoid to organize the entire site in lightboxes.

2012-04-04 07:54
by fcalderan


If you are developing an e-commerce site, then its not a good idea to use lightbox style ajax for loading all pages, because then search engines will not be able to index your products and display to people on search results.

2012-04-04 07:47
by mim
That a strong issue indeed. since the div is hidden and none GoogleBot won't read it. there is no solution to that eh - eek 2012-04-04 07:52
May be if you use href links with # and try to program them in such a way that if a direct url with # comes, you load the it as well.

For eg: Your main site is, and you show a link to category "Sports" like this #Sports, now the full link will become

So you have to do two things:

  1. On click of the #Sports link, perform the ajax load
  2. If someone calls this url, then load your page with Sports content already

This will also allow spiders to read your conten - mim 2012-04-04 10:35


In the past, I've used Fancybox over Lightbox mainly because I found it to be more flexible for my needs.

I too have created a online store using Fancybox with embedded popups to give the user more information on a popup.

What I would say is that to ensure page performance is not hindered, do not render a Fancybox popup through a hidden div on the page. If the hidden div contains a lot of images and content, this will cause some overhead.

The way I've used Fancybox is by loading an external page as its content source:

    titleShow     : false,
    width:    500,
    height:   600,
    autoDimensions: false,
    overlayOpacity: 0.6,
    href: 'product-info.aspx?ID=9' // External page source

I think just use a Fancybox/lightbox with caution. Only add basic product content. Keep the detailed for the product page itself. This will help Google searches (as other people have commented).

2012-04-04 07:53
by sbhomra
I was wondering about a point someone raised in here, since the div is hidden and 'none' GoogleBot won't read what inside that. so as far as SEO I'll be uncovered - eek 2012-04-04 07:57
I have not suggested that you use a hidden div. My code example is loading another page on your site. You could use the page loaded in your Fancybox as the same page you would use as a product detail page in your site. Just apply different styling for the popup - sbhomra 2012-04-04 08:00


I agree with all of F.Calderan's points except maybe the last. I think there is a common use case in the "Quick View" seen on many clothing sites that could work for you. It provides a similar experience to the one you describe while not replacing all the benefits of having multiple pages.

See Old Navy for an example.

2012-06-22 20:58
by Adam Youngers