How to fix slick slider for product images after theme update?

Store Design
1

Dear all,

recently i updated my debut theme to the latest version to comply with scss → css change. However now I have an issue on the product pages.

Before:

I have a product with 3 color variants.

I also use the swatch images, to replace the dropdown with respective small images of the variant.

For product images, I replaced in the liquid with the native theme code with slick slider that was being filtered based on the “alt” attribute of product images, which wasshowing the color name.

It worked just perfect. And when the customer was clicking on the swatch image icon, the slick slider was automatically unfiltered and filtered based on the selected variant to just show the images for that color.

After:

Once I updated the theme to the latest version, this workflow stopped working.

The image swatches work only with the native code, but once i replace it with the slick slider code it just dumps all the images.

If I try to add the filtering function, no images are shown at all.

I am being super puzzled now with this and it becomes a critical issue.

Could one of the experts among you guide me in the right direction how to fix this?

Many thanks in advance,

Nor

2

any hope someone will look at this?

3

@Nor1

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi @Nor1

Can you please share your store URL and some screenshots?

Thanks!

5

thanks guys for replying.

You cannot see it on the site itself, as it is on a developer environment, but I can share some code as below.

If you try on the debut latest version, you will see the issue.

This is how the pictures are displayed on my theme.

You can see that each div element has image alt css class.

And then I try to filter through slick slider those images for each variant. On the current debut theme installed (an older version) this works just fine, but the newer one displays no images.

If I remove the filtering, the image slider still works fine also on the new theme.

6

@Nor1

thanks for details are you able to code try this

https://codepen.io/vilcu/pen/ZQwdGQ

or let me know PM Details

7

Thanks, but this looks like the standard slick slider code, which as I mentioned works anyway well on both versions of debut (old and new).

The filtering is just not working, which I guess has something to do with the new js in the debut theme..

8

asking in community means I am not trying to look on fiverr, or?

9

Nor should you unless it makes sense. That sort of spam shouldn’t be happening here so I removed post and will look at any other they made.

10

thanks Jason, totally agree. I think the purpose of community is knowledge sharing and helping each other where possible.

I do not expect someone to give me a clear step by step guide (although would have been cool :slightly_smiling_face: ), but rather directional piece of advice or sharing how someone tackled similar issue.