Super-easy Shopify Image Gallery

TL;DR If you use Shopify’s platform for your website and your site’s theme doesn’t have a method to attractively display your image sets its no fun.  In the video I walk through how I implement a super-slick Shopify image gallery using the Lightbox plug-in, Lightbox 2, along with some custom jQuery that you can copy and paste right into your site.  

Lightbox galleries + Shopify

If you, or your client, have your website on Shopify there’s a good chance you are uploading a lot of images.  A really attractive way to display those images is in a lightbox.  The problem: while the majoirty of themes will set up some sort of lightbox for your store products, not as many theme integrate the lightbox functionality for other parts of the website – namely blog posts.  There are instructions on Shopify’s site detailing how you add your own lightbox manually to your theme which are useful.  But if you don’t have the plugins they recommend or don’t want to use them, I have a super simple lightbox solution that I’ve been using for years: Lightbox 2.

Lightbox 2: Examples

Click the image below for an example of a single image in a lightbox.

lightbox+shopify

Click any of the images below to see a photo set of light-boxed images.

brook canoe boysshore

Implementation

This section will largely focus on providing you the code for your custom .js file that will work in tandem with the lightbox.js plugin and alerting you to any pitfalls.  I won’t be going into how the code actually works since I already discussed that in my YouTube video.

When you download the lightbox zip folder, all the .js files, .css files and image files are organized into their respective folders. However, when you bring those files over to Shopify they are all going into the catch-all Assets folder.  Because of this, you are going to have to update some relative paths in your .css file.  I’ll cover that later.

Disclaimer

Even though this is a simple solution for implementing a lightbox for your site, you are still going to be making modifications to your theme.liquid file.  Just take your time, don’t delete anything (as I’m only having you add stuff), and make a back up before you start.

The template file

Shopify works with a handlebar templating language called liquid text.  It may take a bit to get used to, but it’s going to save us a lot of typing.  In your theme.liquid file add the following.

//In your <head> link the lightbox stylsheet
{{ 'lightbox.css' | asset_url | stylesheet_tag }}
//
//Then in your footer, link the lightbox.js file
{{ 'lightbox.js' | asset_url | script_tag }}

You are also going to need jQuery in your theme for this to work.  It is likely that you already have jQuery in your theme if you purchased it from a developer.  But there’s always the chance it’s not so look in the theme.liquid file for any reference and if not, add the following call to Googe’s hosted jQuery library to your theme.liquid file either in the head, or the first script in your footer (many plug-ins depend on jQuery).

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

lightbox.css

In the lightbox.css file, you are going to have to change all the relative paths to the included images.  Just open lightbox.css and change every url(../img/filename.png)  to just url(filename.png).  For example, your first couple of css lines should now look like this:

body:after {
  content: url(close.png) url(loading.gif) url(prev.png) url(img/next.png);
  display: none;
}

A code to call your own

Finally, you’ll make a new .js file.  Let’s pretend you call your file my-gallery.js.  Even though nothing is written, we can go ahead and put a call to this script in your footer after the lightbox.js file.

{{ 'lightbox.js' | asset_url | script_tag }}
{{ 'my-gallery.js' | asset_url | script_tag }}

Great! Now let’s actually write something in my-gallery.js.  The only thing you’ll need to think about ahead of time is what you want the class name to be of the <div> that will contain your gallery.  Make it unique; I recommend using your intials somewhere in it, i.e. <div class=”gallery_pjf”>

Once you’re ready, just pop this code in my-gallery.js and save/upload it to your Shopify store.

$(document).ready(function () {
   var galleryCheck = $("div.gallery_pjf").length;
 
   extensions = ["_pico.", "_icon.", "_thumb.", "_small.", "_compact.", "_medium.", "_large.", "_grande.", "_1024x1024.", "_2048x2048." ];

 if (galleryCheck > 0) {
   gallery = $("div.gallery_pjf");
   var images = gallery.find('img');
 
   images.each(function () {
       imgSRC = $(this).attr('src');
       
       for ( var i = 0; i < extensions.length; i++ ){
         var newSRC = imgSRC.replace( extensions[i] ,'.'); 
         if (newSRC.length<imgSRC.length) { break; };
       }
       $(this).wrap('<a href="' + newSRC + '" data-lightbox="gallery" rel="nofollow"></a>');
   });
 }
    
});

All done!

Hopefully that was as easy as I let on it would be.  In the future I plan to make a quick follow-up post to how you can leverage liquid text to implement lightboxes on your site’s assets as an integrated part of your theme’s template files.  Until then!

40 Comments

  1. Hello, thanks for your tutorial!
    Do I name the new my-gallery.js file .js or my-gallery.js.liquid? Is this a template or asset?
    And should I upload the file lightbox.css? is this Add a new asset?
    Thanks.

    Reply
      • The lightbox.css file will be in the package you download from from Lightbox 2. If you’ve uploaded the file to your Assets folder and called the stylesheet in theme.liquid and it still isn’t showing up, then I suspect there’s a typo in the line where you call it.

        Reply
    • Hello, chrislenoski

      Before I start, careful writing HTML in the comments section. I believe your sentence was supposed to be “it’s not wrapping the < a >“.

      If your images are not being wrapped in link tags, then the “images.each” function in your my-gallery.js file is not triggering. This could because it didn’t find any images in your HTML element ‘< div class="gallery_pjf" >‘ or whatever you decided to name the class in both your HTML and Javascript file.

      Keep at it, Chris – and I recommend checking the consol log for errors. If you aren’t familiar with the console log, or debugging in Chrome (my preferred browser), I recommend checking this out: https://developer.chrome.com/devtools

      Reply
      • Thanks so much. this is the error I got
        SyntaxError: missing } after function body
        and the last }; was highlighted. Thanks, your help is appreciated.
        I have this in my-gallery.js

        $(document).ready(function () {
        var galleryCheck = $(“div.gallery_eli”).length;

        extensions = [“_pico.”, “_icon.”, “_thumb.”, “_small.”, “_compact.”, “_medium.”, “_large.”, “_grande.”, “_1024x1024.”, “_2048x2048.” ];

        if (galleryCheck > 0) {
        gallery = $(“div.gallery_eli”);
        var images = gallery.find(‘img’);

        images.each(function () {
        imgSRC = $(this).attr(‘src’);
        for ( var i = 0; i < extensions.length; i++ ){
        var newSRC = imgSRC.replace( extensions[i] ,'.');
        if (newSRC.length<imgSRC.length) { break };
        }
        $(this).wrap('‘);
        });
        };

        Reply
        • Ah! I didn’t properly close my function in the example I wrote. I’ve updated the script to write in the blog post, but essentially what you will want to do is remove that very last semi-colon you wrote, and on a new line write });

          Sorry about that, Chris! I hope it wasn’t too frustrating.

          Reply
      • Oops, I must’ve overlooked that. Thank you! Do you know if there’s a way to tell Shopify to use the alt tag for each image as a caption? I’m building a site for a client who doesn’t know how to code, but she’d be able to add alt text since that’s an option when you add an image. Or alternatively, is there some code I can add to Shopify to tell it to use alt text as the data-title?

        Reply
  2. Hey Nathan, awesome tutorial, I have a weird problem with implementing this.

    On my page the light box comes in at the bottom of the page and thats it with no image loading at all.

    any ideas?

    Reply
    • My personal blog is for “informational purposes only”, so I can’t help you with that part Daniel. Best of luck!

      Reply
    • I didn’t cover it in the video, but I have the steps written out in the blog post under the “Implementation” section. If you’re doing this for a Page (as opposed to a collection or product), then you will need to add some HTML in the RTE (rich text editor) where you wrap all the images in whatever div you’d like.

      Reply
  3. Hi Nathan

    I am doing this on a shopify page and I have come up with a couple of errors.
    1) Uncaught ReferenceError: asset_url is not defined <— on lightbox.js
    2) Uncaught SyntaxError: Unexpected token % if (newSRC.length<imgSRC.length) {% break %};

    Reply
    • For #1: Have you double checked that you’ve uploaded the lightbox.js file to your Assets folder? And if so, make sure that it’s name matches the file you are trying to reference with {{ ‘file-name-here’ | asset_url | script_tag }}

      For #2: This is my bad – in the code I have in the post I wrote {% break %}, but I should have written { break; } like I did in the video. What I originally wrote is a liquid tag, so it didn’t immediately jump out to me as a mistake. I’ve updated the post now.

      Reply
    • Hello, Lionel
      I took a look at your site and it looks like you are missing the data attribute that says data-lightbox=”gallery”. In this screenshot you can also see that your images are being wrapped twice : http://take.ms/u2QBU I’m not sure what would be causing that double wrap, nothing immediate jumped out at me.

      I made this gif showing that if you make a fix to your code that lightbox gallery will work. http://g.recordit.co/UnsZrQDB8t.gif Best of luck!

      Reply
  4. Hello, I implemented this code and it works wonderfully on my shopify page! However, when i navigate through a set of images, it shows the current image a second time before moving on to the next/previous one. Any reason as to why that may be?

    Reply
  5. awesome. worked like magic from the first time.
    can i embed youtube or instagram videos and have them play in the lightbox when clicked?

    Reply
  6. the gallery works great, but what i really like is how you did the css for the square cropped thumbs with the spacing. Would you consider sharing that? I’ve tried doing some stuff but i’m definitely no programmer and i can’t get it to work with the lightbox.

    Reply
  7. Actually I got it to work now, but for some reason.. but the arrows don’t show up on the pictures.. do you know how it would show up on my pictures?

    Reply
  8. Thanks so much for this post, Nathan! With next to no code/scripting experience I was able to get a light box gallery page working. Your hard work is much appreciated!

    Reply
  9. Thankyou so much! helped out heaps and works well!
    Small tip for anyone else, I added the
    wrapper directly into the ‘page.liquid’ file so that theres no chance of a client deleting it from the rich text editor. Works well!
    Thanks again.

    Reply

Leave a Comment.