Add a lightbox to online product images

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

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:

Youtube 2

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:

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.

To implement the customization:

  1. Apply a class to your templates
  2. Add your jQuery

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, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  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 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, you must remove it.

    Note

    The conditional is not present in every theme.

  4. Before the closing </body> tag, copy+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.

Want to discuss this page?

Visit the Shopify Community