buttons on dawn product page thumbnail slider

Shopify Discussion
1

i need this next and previous buttons like the image i have where i can view next and previous image from the carousal on product page i am using dawn theme

Screenshot 2024-11-29 at 1.49.34 PM.png
Screenshot 2024-11-29 at 1.49.34 PM.png930×818 614 KB

1 Like
2

HI @abhicadisoft

Can you share you store URL and Password if its password protected

3

https://1qei1iiehsgjj3nr-72122302722.shopifypreview.com here is the link to the

sautwa <<<-- passkey

4

this is the full url https://quickstart-58ac09a8.myshopify.com/products/test-for-product-page?variant=45669125652738

go to catalog and then select the gold ring name might say sofy navy rug collection

5

Ok the issue is the images are not showing up right?

6

do a refresh now this will show the images. in the mean while i will create a duplicate one

1 Like
7

Okay For that we have to do some liquid customization to make it a slider right now its not a slider its just static tab images
if you can do that customization I can guide you for that kindly share you collaboration code so that I can check

8

4731

9

Kindly accept that

10

Hello, I have checked all the code it seems to be fine but I can’t figure out why it’s not working.

But I have a solution that I used once when my client had the same issue the solution is to change that slider completely with the new custom slider which works the same but uses the Swiper library which I am 100% sure works this need some expertise in liquid customization because you have to fearfully add the swiper close to the image loop if any of class miss place that cause the code not to work so I suggest you to hire an expert because this kind of work take time and effort I can also do that feel free to reach out

The Solution is

  1. First you have to add the swiper library into Shopify assist like CSS and JS and include them into the theme.liquid file
  2. Then you have to modify the product-media-gallery.liquid snippet where the image renders the modification includes fearfully replacing the classes of swiper and swiper thumbnails
  3. Than simply initialize the swiper and select the option or use this script in the theme.liquid file
var swiper = new Swiper(".thumbnail-gallery", {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
  });
  var swiper2 = new Swiper(".main-gallery", {
    spaceBetween: 10,
    navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
    },
    thumbs: {
    swiper: swiper,
    },
  });​

That will work because I have try it into DOM
The above solution will work if you do it properly following the steps if you can do that that is perfect otherwise feel free to reach me out

11

i am already working on the flickity let me know if you can find anything here so far i am here

https://iv56y7egxoaciz6p-72122302722.shopifypreview.com

note that this is a duplicate file i dont know if i need to publish this before hand to share the preview