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

[Berkan1]

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! 🙂

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!

[sedumdach]

This was very helpful! Hands down great explanation.

[Berkan1 · Accepted solution]

Debut Theme Product Image Slider

Install Instructions: Instructions

[lslelegance]

@Berkan1 how to do on dawn theme ?🙏 thanks

[HollowBranch]

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. 

[angelamesat]

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.

[oddframes]

Hi!

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

My site is oddframes.com

[jkgotti]

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

[Shano96]

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?

Thank you!

[Berkan1]

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 

[Shano96]

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.

I sent you the URL via private message 🙂

[Nateheff05]

@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!

[Berkan1]

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: '<i class="fas fa-chevron-circle-right fa-2x"></i>',
        prevArrow: '<i class="fas fa-chevron-circle-left fa-2x"></i>',
        dots: true,
        slidesToShow: 1,
        adaptiveHeight: true,
        });
  }
    else{
      $('.product-image-slider-item').slick({
        nextArrow: '<i class="fas fa-chevron-circle-right fa-3x"></i>',
      prevArrow: '<i class="fas fa-chevron-circle-left fa-3x"></i>',
      dots: true,
      slidesToShow: 1,
      adaptiveHeight: true,
   });
     }
});​

I hope that helps ! 🙂

[elenainaforest]

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

[Berkan1]

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

[DrManhattan]

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!

[HollowBranch]

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-f56df4af2f8042ad9aed8...

[TartByTaylor]

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.