3 months ago

Solution - Fancy Box 3 (New Version) to Supply Theme

After checking all those lengthy methods - I found an easy way out to apply FancyBox to the Supply Theme. You can also try this with other themes. RECOMMENDED - to make a copy of your theme and implement on that first. (This method requires basic knowledge of HTML)

Step 1: Download the zip file FancyBox 3 from their website fancybox.net

Step 2: Download this file - http://code.jquery.com/jquery-3.1.1.min.js

Step 3: Go to Your Themes > ... > Edit HTML/CSS

Step 4: In Assets folder - 'Add a new Asset'
- upload the file download from Step 2
- upload FancyBox/dist/jquery.fancybox.min.css (the file from downloaded zip folder)
- upload FancyBox/dist/jquery.fancybox.min.js

Step 5: Go in Layout folder and open Themes.liquid
Add the following code in CSS section below the existing code of theme.scss.css

{{ 'jquery.fancybox.min.css' | asset_url | stylesheet_tag }}

Save and Close the Themes.liquid

Step 6: Open the file Product-template.liquid  from the Sections folder and Add the following code above the first <img> tag.

<a href="{{ featured_image | img_url: '1424x1424'  }}" data-fancybox="images">


Step 7: Above the Second <img> tag, there is URL code which looks something like this...

<a href="{{ image.src | img_url: 'Large' }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">

* Change the img_url: 'Large'   to   img_url: '1424x1424'
Add this data-fancybox="images" before > tag closes.

It will look something like this:

<a href="{{ image.src | img_url: '1424x1424' }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}" data-fancybox="images">


Step 8: After the {% endif %} add the following script

<script src="{{ 'jquery-3.1.1.min.js' | asset_url }}"></script>
<script src="{{ 'jquery.fancybox.min.js' | asset_url }}"></script>


Step 9: Swayyyy :)

Well, I would suggest testing the code first lol.

Good Luck!

3 months ago

Aloha Raza, thank you for this awesome update. Been trying to figure out how to implement FancyBox, but had not found online guidance until now. Just a couple things:

1. I had to close the <a> tag in Step 6 immediate after. Is this correct place to close it.

2. Also, on the mobile, i dont see the navigation icons for next, close, etc. Can you help with correcting this?

3. Lastly, where do I put code to show the "Image Alt Text" for the product?

Thanks for all your help.


Log in or sign up for an account to reply.

Your Reply