Product page variant thumbnail images not displaying on mobile - Debut Theme

Highlighted
New Member
1 0 0

Hello,

I've integrated a color swatch variant on my product page and added multiple images for the product per this variant with alt text.

The variant works fine but the current issue I'm having is that some of my product thumbnail images seem to be displaying outisde of the slider on the mobile screen and when I inspect the code on mobile there seems to be copied elements of the Li for each product image (more than only 2).

Here photo and below code to understand my issue.

Screen Shot 2020-08-19 at 7.56.32 AM.png

CODE for variant images per color selected:

_filterThumbnails: function(variant){

if(variant.featured_image !=null && variant.featured_image.alt !=null){

$('[data-thumbnail-color]').hide();
//show thumbnails for selected color
//[data-thumbnail-color="Forest-Green"]

var selected_color = variant.featured_image.alt;
var thumbnail_selector = '[data-thumbnail-color="' + selected_color + '"]';
$(thumbnail_selector).show();
}

else {
//show all thumbnails
$('[data-thumbnail-color]').show();
}

 

Also, here are the two tutorials that helped me integrate the variant and multiple images.

https://www.youtube.com/watch?v=ARpSIscriYA

https://www.youtube.com/watch?v=JmyQNJTt4gQ&t=629s

 

I'm not sure if there's an easy solution, if not I can provide my url and password.

Thanks!!

 

0 Likes