Minimal Theme swipeable product slider - tutorial or apps?

Technical Q&A
1

Hi all,

Our site is currently using the “Minimal theme”

I want to make the images on the Product pages swipeable - especially on mobile.

Are there any guides / tutorials for how to best implement this?

I have tried a few generic tutorials for css based sliders and not had much success. Are there any “swipeable” tutorials focussed on Shopify / Liquid code?

Or are there apps to do this that you recommend?

Ideally I want to build it myself so I have full control over the code.

Thanks,

Darren & Binanti

2

Hello, @chicandraw

You’re looking for a carousel.

Here’s one you can repurpose

https://kenwheeler.github.io/slick/

If you’d like assistance setting it up for your site, please let me know.

3

@chicandraw

This can be a potential solution for your case. Here’s an example of how the end result looks like:

https://acid-tests.myshopify.com/products/dummy-product

The code snippet above adds swiping/arrows to all product page images, plus a thumbnail carousel that can be enabled/disabled through the customize page in case you prefer the original thumbnails that ships with the Minimal Theme. In addition it does not come with any monthly fees.

Just leaving it out here in case you are unable to find any other alternatives for your case. Wishing you all the best.

Kind regards,
Diego

4

Thanks for the link @diego_ezfy

This looks like a good solution, very slick. Good to know for any future development we have.

5

Thanks @David_Weru
This was just what I needed for this task. I wanted to experiment a bit with liquid and shopify as I normally build Angular11+ web / mobile apps in my day job.

The slick slider was a good test subject.

I managed to get an implementation working on our current shopify site. Its a bit rough but will do the job for now.

Check it out here:
https://chicandraw.co.uk/products/ruby-root-chakra-crystal-candle