FancyBox Implementation in Minimal Theme(Product gallery)

5 0 0

Hey all,


So I've been trying to implement Fancybox on my product pages as a gallery that will appear under the fold, but without much luck. 


So far, I've built a for loop and managed to display the correct images(code seen below). I've imported FancyBox, but what it does when a user clicks on an image, is that it auto directs to a new page where the image is displayed instead of it opening the Fancybox gallery itself. 


This was achieved after I follow this guide:


But fancybox isn't working. I've tried lightbox as well, but I can't get that to work either.


My code in the product.liquid template looks like this:



 <div class="one-half" 
      {% for image in product.images limit:8 %}
         href="{{ image | img_url: 'large' }}"
           src="{{ image | img_url: 'medium' }}"
       	   alt="Product image"
      {% endfor %} 




It looks like this on the shop(I know flexbox must be messing with it):

Screenshot 2019-11-13 at 02.50.11.png


What I am trying to accomplish is something like this centered nicely right under the fold:

Screenshot 2019-11-13 at 02.54.47.png



Shopify Expert
665 170 199

Hi, @CloudOne ,

This is Evita from On The Map.


Can you add your store URL? I think the fancy box is not imported in your project.



On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
5 0 0



You are right, Fancybox wasn't properly installed. However, I figured out how to install it properly, and it works now when an image is clicked, but the CDN's and script I used to import them interacts & interferes with a lot of other things on the shop. So I had to disable them, order buttons weren't working and some banner images on the Home page were suddenly gone.


I used these CDN's found on Fancybox's own pages, it worked, but like I said, messed up a lot of other things. I threw them right before the closing body tag in theme.liquid



<!-- 1. Add latest jQuery and fancybox files -->

<script src=""></script>

<link rel="stylesheet" href="" />
<script src=""></script>



I'm using the Minimal theme, any ideas on how to solve this issue?


The URL is