We are Underground support

Add a popup lightbox to images on your pages

Last Updated: Aug 24, 2016 01:38AM EDT

Looking to access your theme's code or language options with Shopify's new theme editor layout?

In your Shopify admin click on Online store > Themes
Next to the theme that you want to edit click on the Menu button which is a small square with 3 blue dots
This will open a submenu of options which includes: Edit HTMl / CSS and Edit Language

Adding click to enlarge popup light boxes to images within 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 Shopify themes and can 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 posts depending on the content you are creating and add a new Page or Blog post.
Within the page editor click on the < > ( View HTML ) icon to go into the code editor.


3. Adding the neccesary 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 in to the 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.

 

Get help

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
retail@undergroundmedia.co.uk
http://assets1.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete