How to install Slick Slider on Product's page thumbnails

Highlighted
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
Highlighted
Trailblazer
133 29 42

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.

 

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
0 Likes
Highlighted
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
Highlighted
Trailblazer
133 29 42

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.

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
0 Likes
Highlighted
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
Highlighted
Trailblazer
133 29 42

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

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
0 Likes
Highlighted
Excursionist
58 2 1

I know this is an old thread but did you manage to do it?

0 Likes
Highlighted
New Member
4 0 0

Would love to know if this worked also... I'm wanting to add the slider on my home page and guessing it would be similar instructions??

0 Likes
Highlighted
New Member
4 0 0

I am having trouble creating a slick slider to my website i downloaded it from the correct source and added the files to assets and then tried adding to theme.liquid but not sure where i should add it in any help would be appreciated

0 Likes
Highlighted

Hi Daniel,

Hope you are great!

This is jay from Oakleaf Infoway. We would love to help you to make an attractive slider banner on the home page/product page but there you have to pay some minimum consultation charge.

Does that make sense?

If yes, please reply on my email address is jay@oakleafinfoway.net

Best wishes.

 

Team, Oakleaf Infoway

Skype: live:.cid.2ca82125d1edaa5f
Email ID: info@oakleafinfoway.com
Website: www.okaleafinfoway.com
0 Likes