Featured collection slider for Dawn Theme Shopify 2.0

Featured collection slider for Dawn Theme Shopify 2.0

This might not work with the updated Dawn Theme. If you just added Dawn theme, please check this code instead here

We created a variant slider in the product page recently. See link. We can easily use the logic for the collection slider but if we notice, we rather just use the featured collection available as a section. 

In this tutorial, we will create a collection slider using the featured collection. We just have to do some customization. 

 

  1. Go to your Online store > Themes > Actions > Edit code
  2. Go to Section folder and create a section, we will name it "collection-slider"
  3. In the new section, paste the code below, then click SAVE
<

      4.  Go to Asset folder, create a new file, name it "collection-slider"

      5. Open the newly created .css folder and paste the code below, then click SAVE

<

 

   6. We need to go to the Asset folder again. Open the global.js file and find the slider-component. At the connstructor, lets add this code below

<

 

  7. At the initPages section, replace the this.totalPages with the code below

<

   8.  At the update() section, replace the this.currentPage with the code below

<

 

Your code at global.js should look like below

 That's it. Let me know if you have questions (",)

 

Updated 10/19/21: For issues with the image has a different height with the ones, I simply delete this code below. 

 .grid--peek .grid__item:first-of-type {
padding-left: 0 !important;
}

Updated 11/12/21: Added a product-limit range. See code in blue.

Updated 11/24/21: Added a show all button. See the section settings to click the show all button. See code in green.

 

Copied!
Back to blog

9 comments

Can you please change the count number? It starts from 4, but it should be 1, and it should count pages, not products. I mean I prefer that way. Can you make the change please ?

Ruhi

Here I found bug please solve the number next and prev not proper

Ikhlaque

Hi @Arslan Ali
I did update the code for that. See above

Made4uo

First slider’s image has more height than other sliders. Please help

Arslan Ali

Leave a comment