How to show an image in a pop-up window

If you need to add a modal window (pop-up) to show an image in on a Page or Blog post, try this very simple method:

Result:

How to

1

Add code to your shop.js or theme.js

Pipeline 4, open assets/theme.js:
assets/theme.js

Pipeline 2 or 3, open assets/shop.js.liquid:
assets/shop.js.liquid

Starting on a new line, add the following code to the very bottom of the file:

  $(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

Save the file.

2

Add a link on your Page or Blog post

The format to add a pop-up link is:

<a class="image-link" href="your-image-url">Open popup</a>

Replace your-image-url with an actual image URL. Example:

https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_530x.jpg

Replace Open popup with the link text you'd like to use.

Here's a true example:

<a class="image-link" href="https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_530x.jpg">Open popup</a>

You can add as many links as you like, make sure you use the class " image-link" in order for the pop-up/modal to work.

Notes:

Use the code icon to insert your code on Pages and Blog posts:

Use this link to help you get your site's image URL's:

myshopify.com/admin/settings/files

These URL's are the full size image. So you may want to use a smaller image by converting:

https://cdn.shopify.com/s/files/1/2018/8867/files/pexels-photo-42157.jpeg?16185409203671534986

to 

https://cdn.shopify.com/s/files/1/2018/8867/files/pexels-photo-42157_800x.jpeg

Notice how I dropped everything after the .jpeg but added _800x before .jpeg (your files might be .png or .jpg)

_800x is the width I want. I could use _640x or _1000x depending on the width I want the image to show. 

To show a thumbnail image instead of "Open popup", you can use something like this:

<a class="image-link" href="https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_800x.jpg"><img src="https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_200x.jpg"></a>

Result:

Additional Customization

Pipeline uses Magnific popup. The code you add to shop.js is to initialize the popup based on a link class. You can use more advanced techniques if required:

http://dimsemenov.com/plugins/magnific-popup/documentation.html


Advanced

This code will make all images on your blog pages zoom into a modal window upon click. No additional links required or knowledge of image filename. 

$(document).ready(function() {
  $('.template-article img').each(function() {
      var currentImage = $(this);
      currentImage.wrap("<a class='image-link' href='" + currentImage.attr("src") + "'</a>");
  });
  $('.image-link').magnificPopup({type:'image'});  
});

Still need help? Contact Us Contact Us