How to install Slick Slider on Product's page thumbnails

Tourist
24 0 0

Hi there!
Has anyone figured out how to install Slick Slider on Shopify's Product page to display thumbnails? I downloaded the file but I can't find clear instructions, not even in Slick's site. Where should I paste what? I'm pretty sure I can manage if only someone can tell me the steps!

Here's my url: https://www.focallurecosmetics.gr/products/matte-liquid-lipstick?_sc=1&design_theme_id=74436083772&f...


And here's Slick's instructions. 
http://kenwheeler.github.io/slick/
(I'm interested in "Slider Syncing" model)

Also there's a messy carousellite on my product page that I'm planning to get rid of as soon as I manage to install Slick.

Thank you i advance,
Nat!

0 Likes
Excursionist
46 8 18

Following are the steps to add slick in your store


1. Download slick library http://kenwheeler.github.io/slick/#go-get-it

2. Unzip it go to the slick folder, copy slick.js, and slick.css and paste into your assets folder
3. Include both assets in your theme.liquid layout
4. Initialize slick using the JS code given under "Slider Syncing", you may change the flags according to your need.

 

- Feel free to contact me at waqas4346@gmail.com
- Was my reply helpful? Click Like and Accept as Solution
0 Likes
Tourist
24 0 0

Thank you very much! I've made it to step 3 and I have the code for step 4 so I'm closer than ever!
My silly question is how do I initialize slick. I'm sure this is very simple it's just that I haven't done that again while building my store!


$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slick-carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});


Again thank you so much or your reply!

0 Likes
Excursionist
46 8 18

In this code,2019-12-19_2029.png you just need to change the CSS selector according to your template and it should work correctly.

- Feel free to contact me at waqas4346@gmail.com
- Was my reply helpful? Click Like and Accept as Solution
0 Likes
Tourist
24 0 0

I appreaciate your support more than you can imagine!

This is finally coming together. My final question is where should I paste that code (Slider is meant for product page thumbnails)

Thank you very much!

0 Likes
Excursionist
46 8 18

You may directly add it in your theme.liquid but the best way is to create a new JS file add the code there and include that JS file in your theme.liquid

- Feel free to contact me at waqas4346@gmail.com
- Was my reply helpful? Click Like and Accept as Solution
0 Likes