Online store - Add a lightbox to online product images

Highlighted
Community Manager
Community Manager
478 27 581

 


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:

lb-01.jpg



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.



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.

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
New Member
4 0 0

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

0 Likes