JS problem with grid images on product page

Store Design
1

Hi, i have my live theme which for some reason is working differently to an unpublished theme which has the same code, it seems the js is assigning some classes in my live theme and viceversa and the live theme isnt working correctly as it should. I need it to work as the one unpublished. I cant publish the other theme because it is old and needs some work on images, texts which is a lot of work, the code should work fine because they are the same but they dont.

Here is my live theme https://rs-latam.com/products/hick-men?variant=39778322514018

And my unpublished theme https://iydvoyzdlwnqd835-28046196834.shopifypreview.com

The difference is that in the product page on mobile it shows all the images of the product when instead it should only show one and you can select the others via the slider

Here are the images

guido23acuna_0-1654750653045.png
guido23acuna_0-1654750653045.png1366Ă—768 93.8 KB

guido23acuna_1-1654750666480.png
guido23acuna_1-1654750666480.png1366Ă—768 98.6 KB

1 Like
2

@guido23acuna

No, their is no, major js issue,

3

How so, so then whats the problem?

4

How so, so then whats the problem? @Mr_RaviRaj

5

Hello @guido23acuna ,

To make the product gallery as a slider we need to change the image library. You can use the Slick slider to create the product image slider.

6

Hi @SmallTask how precisely can I do that? Thanks for your answer

7

  1. First download the slick library http://kenwheeler.github.io/slick/#go-get-it

  2. Extract the downloaded Zip file and go to the slick folder.

  3. Copy slick.js, and slick.css and paste them into your assets folder.

  4. Include both the copied slick.js and slick.css assets into your theme.liquid layout.

  5. Initialize the slick by using the JS code which is placed under the “Slider Syncing” option.

8

Already did the first 4 steps but I dont seem to find the Slider Syncing option, where do i find it @SmallTask

9

You can find on this link https://kenwheeler.github.io/slick/