Online store - Add a lightbox to online product images

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

Caution

This document has not been verified to work with sectioned themes. You can try to implement this on your theme, but keep in mind that it may not function.

---

Highlight your online products by activating a lightbox when a customer clicks a product image.

What this customization achieves

This customization enables a lightbox for your website images. When an image is clicked, it's displayed as a highlighted overlay on the current page, while the rest of that page content is darkened and disabled.

The result looks like this:

Prerequisites

You need a theme that already uses a lightbox plugin on product pages. You can find out if your theme uses one, by going to a product page on your storefront and clicking on your main product image. If the image opens up in a centered box on the screen with the background dimmed, then you have a lightbox.

Common lightbox plugins used by Shopify themes are:

• Fancybox
• Slimbox
• Colorbox

Implementing the customization

You don't want every image on every page to open in a lightbox. In particular, images that are hyperlinks should be skipped. You still want your visitors to be able to click on those images to go to another web page.

In addition, if the original uploaded image is the same size as the image shown on the page, you want to leave that image alone and not have it open in a lightbox.

Apply a class to your templates

First, you need to edit your page.liquid, blog.liquid and article.liquid templates.

In each template, locate the div element that contains your page or blog post content. To the opening <div> tag, add class="rte" (“rte” indicates Rich Text Editor).

In detail, the steps you need to follow to achieve this are:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. Under the Templates folder, click on page.liquid, blog.liquid and article.liquid to open them in the online code editor:
   
   
   • page.liquid is used for all specialized page content.
   • blog.liquid is used for the blog landing page.
   • article.liquid is used for each individual blog post page.
     
     
4. Locate the div element that wraps your content, and add rte to its class attribute. Add the class attribute if it doesn't exist already.
   
   
   • In page.liquid:
     
     

     <div class="rte">
       {{ page.content }}
     </div>

   • In blog.liquid and article.liquid:
     
     

     <div class="rte">
       {{ article.content }}
     </div>

5. Save your changes to each template file.

Add your jQuery

Now you need to add some JavaScript to your theme:

1. On the Edit HTML/CSS page, under Layouts, click on theme.liquid to open the file in the online code editor.
2. Locate the code that includes the lightbox plugin, by searching for the word fancybox, colorbox or slimbox.
3. When you locate the code, look for a conditional statement around it that resembles the following:
   
   

   {% if template contains 'product' and settings.main_image_display == 'Lightbox' %}
   {{ 'jquery.fancybox-1.3.4.pack.js' | asset_url | script_tag }}
   {% endif %}

   If you find the conditional statement, you must remove it.
   
   Note: The conditional statement is not present in every theme.
   
   
4. Before the closing </body> tag, copy and paste the following:
   
   

   <script>
   jQuery(function() {
     jQuery('.rte img').not('a > img').each(function() {
       // Matching images that aren't already shown in their original size.
       var re = /(_small)|(_compact)|(_medium)|(_large)|(_grande)/;
       var src=jQuery(this).attr('src');
       if (re.test(src)) {
         // Determining the URL to the original image.
         var href = src.replace(re, '');
         // Activating lightbox.
         jQuery(this).wrap('<a></a>')
           .parent()
           .attr('href', href)
           .addClass('lightbox')
           .colorbox( {
               maxWidth:"95%",
               maxHeight:"95%",
               scalePhotos:true} );
       }
     });
   });
   </script>

   If your theme uses Colorbox, the customization is complete.
   
   

5. If your theme uses Slimbox or Fancybox, you need to make the following final edits:
   
   For Fancybox, replace this:
   
   

   .colorbox( {
               maxWidth:"95%",
               maxHeight:"95%",
               scalePhotos:true} );

   
   with this:
   
   

   .fancybox({
     'hideOnContentClick': true
     });

   For Slimbox, replace this:
   
   

   .colorbox( {
               maxWidth:"95%",
               maxHeight:"95%",
               scalePhotos:true} );

   with this: 
   
   

   .slimbox();

6. Save your changes.

[ManrajSandhu]

I cannot find the colorbox, fancybox and lightbox options in my theme.liquid code.

[exo-6]

Hello, 

I added these to my code, but I couldn't figure out which box my theme used (Debut?). Either colorbox/lightbox/fancybox. Referring to the theme.liquid file.

nothing is showing up yet

exo-6.com