I have a javascript question for you.
If you go to this store/site (https://charcocaps.myshopify.com/) that is in development and try to interact with the product image gallery, just below the top banner section, you will notice that the images do not change out when you click on a thumbnail to try and view it in the large image placement. This product section was created using a built in block/component of the Dawn theme called “Featured Product”. By default the code for the component exports out all the elements that you see for the product display but instead of a product gallery, even though there are multiple images to support it, only displays a single product image. But this is different on the product page where a full gallery type display is used (https://charcocaps.myshopify.com/products/charcocaps). I and my client are not a fan of this single image thing with the featured product component because we want this site to be a single pager kind of site.
So I thought, I wonder if I could pull the gallery code/HTML out the liquid file (main-product.liquid) that outputs the gallery on a product page and replace the code in the feature component/block (featured-product.liquid) and see what happens. Everything works great except for the interactivity of switching what image is shown when clicking on a thumbnail. From what I can tell all the pieces are there to make it the interactivity work, but it is not working. The file (media-gallery.js) that is used for the interaction is present in the code, despite my modification to it, but nothing. It looks like the Shopify devs of this theme may have had plans to put the gallery in the featured product block/component but haven’t done it yet or decided against it due to issues with a bunch of images having to load if someone placed several featured product blocks on a page. Either way, I need someone with JS skills to debug it and see what I’m missing.
I can always create a modified media-gallery.js file just for the featured component if needed. Thanks for any help.