Debut Theme - Solution to swipe images on the product page (Mobile & Desktop) 2021

Store Design
1

Hello everyone!

i have developed a swipe-able product image Slider for Debut Theme, as the the debut theme doesn’t have it as a native feature.

The Slider is mobile friendly and easy to install. And yes its free! :slightly_smiling_face:

preview-gif.gif

Heres a Live Preview of the Slider. The Password is: slider

How to add it to your Debut theme

  1. Head to the Install Instructions: Instructions
  2. Follow the Steps in the Blog(Copy and Paste the Code Snippets)
  3. You’re done!

Notes:

  • If it doesn’t work on your page, just revisit the Steps in the Blog, maybe you missed something.

  • Any Bugs/ Feature wishes? Just write me a mail: berkanceyhan@gmail.com or post it on this Thread

  • If i missed something just let me know!

I hope i could help you with that!

Thanks!

2 Likes
2

This was very helpful! Hands down great explanation.

1 Like
3

Debut Theme Product Image Slider

Install Instructions: Instructions

4

@Berkan1 how to do on dawn theme ? :folded_hands: thanks

1 Like
5

Good Code! The Slider Works. But Everything is now straight under the Product Images. The Add to Cart Buttom is also under it.

6

Hey @Berkan1 , I added the code as you described in the link. On the desktop, the arrows are not where they should be. the mobile version is great, just like you edited it, but not on the desktop.

Could you help me there briefly?

Bildschirmfoto 2022-09-02 um 14.09.59.png
Bildschirmfoto 2022-09-02 um 14.09.59.png1200×590 131 KB

Thank you!

7

Hello @Shano96 ,

Please share your Shop Url so I can take a look on it.

If you don’t want to share it here, you can send it via Email: berkanceyhan@gmail.com

Kind regards

Berkan

1 Like
8

Hello @Berkan1 I have solved it. My another question.

Do you happen to know how to get to see all the product images under the product image? I have marked it in red on the picture.

Bildschirmfoto 2022-09-02 um 15.25.20.png
Bildschirmfoto 2022-09-02 um 15.25.20.png1080×616 168 KB

I sent you the URL via private message :slightly_smiling_face:

9

@Berkan1 I really appreciate your help, but my slider isn’t working correctly. I sent you an email about the problem as well. There isn’t a slider and all of my product images are just lined up vertically on the left side of the page. Let me know if you have any advice!

1 Like
10

Hey Nathan,

i send you a message via email. I’ll share the solution here too if someone else needs it:

It seems like you didn’t implement the Jquery Script correctly. Please head to your theme.js file and add this code at the end of the page:

/*Product image Slider JS*/
$(document).ready(function(){
    if(window.innerWidth <=749)
    {
        $('.product-image-slider-item').slick({
            nextArrow: '',
        prevArrow: '',
        dots: true,
        slidesToShow: 1,
        adaptiveHeight: true,
        });
  }
    else{
      $('.product-image-slider-item').slick({
        nextArrow: '',
      prevArrow: '',
      dots: true,
      slidesToShow: 1,
      adaptiveHeight: true,
   });
     }
});​

I hope that helps ! :slightly_smiling_face:

11

I have Debut version 11.0.1. Can you give us the same steps (To add the option for customers to swipe the main product picture to the right or left on mobile instead of having to scroll down to see the other pictures of the same product, then having to click on one of the small thumbnail pictures and then scroll back up to see it as the main picture and then to look at the next picture, having to do the same steps again) I’d like my customers to have the option to just swipe the main picture to the right and left to look at each picture, even if it’s with an arrow. I have found a way to add an arrow to the thumbnail pictures (below the main picture) but I can’t find a way to add the arrows to the main picture.

SLIDER SWIPE ARROWS NEED WEBSITE.jpg
SLIDER SWIPE ARROWS NEED WEBSITE.jpg707×792 42.6 KB

12

Hi! Thank you! I did it but when I make the steps 2 and 3 the images desapear! Could you please help me?

My url is https://mariaemma.com.co/

I delete the steps 2 and 3.

13

Hi, I can’t download the instructions, the link is not valid

14

UPDATED LINK: https://berkanceyhan.notion.site/Shopify-Product-Image-Slider-Debut-Theme-FREE-f56df4af2f8042ad9aed8e1a84618871

1 Like
15

Hi,

I’m very much interested in your solution for the debut image slider. The link to your instructions blog post, however, is dead. Any other page/solution that you can refer to?

Thx!

1 Like
16

He updated it right above your response. Here is the link. I tried it, and it worked, but I lost my thumbnails. https://berkanceyhan.notion.site/Shopify-Product-Image-Slider-Debut-Theme-FREE-f56df4af2f8042ad9aed8e1a84618871

17

Hello! Is there a way to add the sliding capability, but also keep the thumbnails under the main photo? When I add, it removes the thumbnails.

2 Likes
18

Hi!

I tried following instructions but on step 2 I don’t see the code: <div class="grid

My site is oddframes.com