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:


How to

Add code to your shop.js file

Click to open this file:

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

  $(document).ready(function() {

Save the file.

Step 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:

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

Here's a true example:

<a class="image-link" href="">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.


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:

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


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=""><img src=""></a>


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:

Still need help? Contact Us Contact Us