d
Topic
Posts:
1
5 days 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!

Log in or sign up for an account to reply.

f
Your Reply