Link to show an image in the product gallery.

[AlfieHayward1]

Hey there, 

I have the debut theme and have created a link next to the image in the product template page, This link is for "see size guide" which i would like when someone clicks it, the displayed photo will change to a different image which i have set, in this case the size guide. The image is already uploaded in the gallery, similar to how choosing a variant which is linked to a specific image will cause it to show when selected. 

Does anyone know how i can link this "size guide" link to a photo in the product images gallery. 

Thanks 🙂

[Tristram]

So the solution requires me to make a lot of assumptions, so if anything is missing, please let me know.

The first assumption is that the size guide is ALWAYS the last image in the gallery?
the second assumption is that you're comfortable editing code?
the third assumption is the debut theme you're using is, or is exactly the same for this section of code as the current version.
Are you able to add a class to the See Size Chart link and remove the href?
<a class="show-size-chart">See Chart Link</a>
So if the stars align and the ducks are all in a row you can add a click event to your link that triggers ANOTHER click event on the last image of the thumbnails.

Above the schema on the products liquid page you can add:

<script>

const sizeChartBtn = document.querySelector('.show-size-chart');

sizeChartBtn.addEventListener('click',showSizeChart);

function showSizeChart(){

    document.querySelector('.product-single__thumbnails li:last-child a').click()

}

</script>

[AlfieHayward1]

Thanks for your help, I appreciate it as I haven't been able to find anything on this topic.

Yes the size guide can be the last image in the gallery if needed, and i do know how to edit the code enough to make this. However i don't know if my theme is the same version as the current version, although i believe it should be.

Unforutantly the code didn't seem to work, i don't know why but the link doesn't seems clickable after i removed the href. Also what do you mean by adding the code above the schema as i can't find a schema tag on the product.liquid page.

Thanks again for your help. 🙂

[Tristram]

It might be a little older so that selectors that I'm using may not match up. Feel free to send me a message with the store name and I can have a look and see what it is direct.

you could try and add this at the bottom of the page but if it doesn't work then I've got a wrong selector in there somewhere:

<style>
.show-size-chart{
text-decoration:underline;
color:inherit;
cursor:pointer;
}
</style>
<script>
const sizeChartBtn = document.querySelector('.show-size-chart');
sizeChartBtn.addEventListener('click',showSizeChart);
function showSizeChart(){
    document.querySelector('.product-single__thumbnails li:last-child a').click()
}
</script>