How to add a popup lightbox to images on your pages

Adding click to enlarge popup light boxes to images on the pages or blog posts within your theme is very simple. Unfortunately, it can not be automated but this quick guide will walk you through how to do that. 

To begin the following code is intended for use with the following Underground Shopify themes and is not be supported for others, not on this list:

  • Epic
  • Icon
  • Testament
  • Mr Parker
  • Fashionopolism
  • Vantage

1. Upload your files first
In your Shopify Admin go to Settings > Files
This is an area where files used within pages, blog posts and other contents are stored and can be used across your store. 
Upload each of your images here. Each will be given a URL which is the part that we will need.

2. Open or create the page
Click on pages or blog articles depending on the content you are creating and add a new page or blog article.
Within the page, editor click on the < > (View HTML) icon to go into the code editor.

3. Adding the necessary code
In a new tab open your Files page again locate the small and large images that you want to show.
Each will have been given a URL when uploaded.

Copy the URL's and add them to the code below.

<a href="paste-the-large-image-url-here" class="fancybox">
<img src="paste-the-small-image-url-here">
</a>

Repeat this step for any other images and click save.
You will now show small images on the page which when clicked will enlarge.