FTR

- JS is loading now so I am adding auto incrementing for the product thumbnails

BC-Layout.html

@@ -248,6 +248,7 @@ <h1 class="custom-page-header page-title has-dash">{{ page.name }}</h1>
     <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
     <script src="//cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js"></script>
     <link href="https://cdn.jsdelivr.net/gh/sk5/sk5.github.io/assets/css/styles.css" rel="stylesheet" type="text/css" />
+    <script src="//cdn.jsdelivr.net/gh/sk5/sk5.github.io/assets/scripts/product-slideshow.js"></script>
     <script src="{{ 'api' | theme_js_url }}"></script>
     <script src="{{ theme | theme_js_url }}"></script>
 </body>

BC-Product.html

@@ -21,7 +21,7 @@
                 <!-- 1. Add unique class names to onclick and the images above -->
                 <!-- 2. When clicking a unique thumbnail, show the corresponding image -->
                 <!-- 3. Hide all other child images parent <li>'s -->
-                <a href="#" onclick="show(1)">
+                <a href="#" class="product__thumbnail--link" onclick="show(1)">
                     <img class="product--image" src="{{ image | product_image_url | constrain: 300 }}" alt="Image of {{ product.name | escape }}">
                 </a>
             </li>

assets/scripts/product-slideshow.js

@@ -1,8 +1,15 @@
 window.onload = function () {
+    // Auto increment main images
     var list = document.getElementsByClassName("product__slide");
     for (var i = 0; i < list.length; i++) {
         list[i].setAttribute("data-slide", "image" + i);
     }
+    //
+    // Auto increment thumbnails
+    var thumbnailList = document.getElementsByClassName("product__thumbnail--link");
+    for (var j = 0; j < thumbnailList.length; j++) {
+        list[j].setAttribute("onclick", "show" + j);
+    }
 };
 
 function show(nr) {