Dawn Slide Component

Solved
made4Uo
Trailblazer
262 10 59

Hi @akatev ,

Here is the code as promised. https://made4uo.com/blogs/journey-to-awesome-shopify-website/collection-slider-for-dawn-theme-shopif...

It is just a featured collection section code but I customize it so it will show the slider component. I did not have to add any javascript. Let me know if you have issues

 

Maybe I should be working with Shopify since I solve several problems and answered questions. LOL but glad to help though. (",)

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
akatev
New Member
7 0 0

@made4Uo It's worked!  Thanks for your helps.

If I want to display 5 instead of 4, where would I be able to make the adjustment?  Sorry, I'm not good this coding.

0 Likes
made4Uo
Trailblazer
262 10 59

Yes it is possible.  You have to make changes to the code. It does not look good though since the last image will be cut off. If you really want it, please do the following changes to the code

1. Go to the product-slider.css file that we created and change the .product-slider  width: 19% !important

2. In the main-product liquid. Change all the number 4's you can see inside the slider-component in to 5.

3. Go to the Asset folder and open the file global.js and change the code we added to 5 instead of 4. The following codes I am talking about are the codes below

 if (this.productSlider) { this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 5} else {
this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 1;
}

if (this.productSlider) {this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 5} else {
this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 1;
}

 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
Charles121
Tourist
24 0 3

Thanks for contribution. I have followed the guide, and everything works fine, expect if you have a video in the slider, the play button of the thumbnail won't show. I am wondering if others have the same issues. I have left a same message on your blog. Thanks.

0 Likes
made4Uo
Trailblazer
262 10 59

Hi, 

@Charles121 let me look at it. Thank you for leaving a comment

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
made4Uo
Trailblazer
262 10 59

Hi @Charles121 ,

Thank you for leaving a comment. I was able to update the code to show a play button when thumbnail image is a video. See website https://made4uo.com/blogs/journey-to-awesome-shopify-website/product-slider-for-dawn-theme?comment=1.... Let me know if you have issues. 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
Charles121
Tourist
24 0 3

Thanks for prompt reply,  . I re-copied all the code on your website, but  still the play button won't show on the slider thumbnail. it will show on the featured image above, but not the slider thumbnail below.

0 Likes
made4Uo
Trailblazer
262 10 59

Hi Charles,

Sorry. I might have pasted the wrong code. Try to replace your code with the new code in the Step #4 again.

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
Charles121
Tourist
24 0 3

Thank you so much,@made4Uo. I have tried again with your new code, the play button shows up on the thumbnail at bottom this time, however, it seems that the upper featured image won't update when click thumbnails underneath. I am a newbie, maybe I messed up something, I will try it tomorrow and feedback to you. Thanks.

0 Likes
made4Uo
Trailblazer
262 10 59

Hi @Charles121 ,

I cannot duplicate your error though. Let me know

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes