Debut theme - Product thumbnails as slider

Solved
Highlighted
Excursionist
42 1 6

@Tom-r wrote:

hi slider not working I am not sure what I have done wrong https://blackpearlcoating.co.uk/products/black-pearl-black

 

any help 


Can you upload your codes here so I can take a look?

Also, might I suggest to use GIMP (free version) to resize all your products pictures with applying a transparent background so when switching between pictures, it's not moving the whole page

and since you have a lot of information for your products you ca use <!-- split -->

Here's my website as an example: https://petlantis.ca/collections/dog-toys/products/foufit-woodland-spiker-2-in-1-toys

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Highlighted
New Member
1 0 0

how to add dots on product thumbnail slider

0 Likes
Highlighted
New Member
2 0 0
hi

I had to put back the code as it broke the site

but it would good to get it on as I have a lot product images



0 Likes
Highlighted
Tourist
9 0 1

Hi Tejas,

 

What a brilliant code there. Thank you for your generosity in sharing the code with us too!

I was wondering if it is possible to wipe the image on the pictures to change the images instead of clicking them? (please refer to image)

 

This was also brought up in another thread

1. https://community.shopify.com/c/Shopify-Design/Debut-Theme-Product-image-swiping/m-p/552515

2. https://community.shopify.com/c/Shopify-Design/Image-Swipe-on-Mobile-DEBUT-Theme/td-p/365610/page/3

 

It seems that another Shopify store with debut theme managed to achieve this.. "https://bettyberry.co.uk/collections/vintage/products/copy-of-khaki-check-trousers

 

Betty Berry mobile slide.PNG

 

Thanks in advance!

 

0 Likes
Highlighted
Shopify Partner
64 1 3

I would be interested in swiping the image too 

0 Likes
Highlighted
New Member
1 0 0

Thank a lot Tejas for your time!

 

Everything worked perfectly except that I have also encountered the same issue as LiquidDiffuser did on the first page of this thread. Has anyone figured out how to make it so that the thumbnails do not move when the images are different sizes?

0 Likes
Highlighted
Excursionist
42 1 6

@richpeeps_ 

The best way to do this editing your photos. It makes them organized on product page and collection page (especially for smaller devices)

What to do is to create a background for your images either transparent or colored to make the image a square.

I use GIMP to edit. You can use Photoshop and others but GIMP is free and easy to learn. I learned it in less than a day, Just search "how to" on Youtube, there are tons of videos.

Another way is to pay for an app to do this for you, but honestly, it's very easy to do it yourself and save a few $$$

 

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
New Member
1 0 0

Hi Ardi94,

 

as soon as I insert your code at the second _initBreakpoints() in the theme.js, I get the issue that when I click on a thumbnail product picture in my store, it becomes full screen. It does not come up as the picture in the frame, but just takes over the entire screen :) Do you know what might be the issue here? Thnx!

 

Edit: I fixed it. All the best.

0 Likes
Highlighted
New Member
2 0 1

Hello, I have done all, but it don't work.

0 Likes
Highlighted
Shopify Partner
64 1 3

@Ardi94 I need to use  the <!-- split --> but how to use with debut theme?

thanks

0 Likes