Adding navigational arrows to a collection of products in the Debut theme

New Member
1 0 0

Hello, I was wondering how I could add navigational arrows to a collection of products in the Debut theme. An excellent example is linked here: Under featured products, there's navigational arrows where you can click to see the next product, having all of the products in one row. Thank you!

0 Likes
Shopify Expert
115 22 46

That function you're referring to is called a carousel. 

 

http://kenwheeler.github.io/slick/

https://owlcarousel2.github.io/OwlCarousel2/

 

You basically need to set up the carousel and loop the products inside of it. 

 

<div class="carousel">
  {% for product in collections.COLLECTION_HANDLE.products %}
    {% include 'product-grid-item' %}
  {% endfor %}
</div>

If you're using slick for example, you need to include the plugin files (js and css) in the head and then initialize the script: 

 

$(function(){
  $('.carousel').slick();
});

 

Most themes will have a product-grid-item.liquid file or something like it that contains the actual thumbnail, product name, price, etc. You just need to find that and loop it. 

 

If this is all confusing to you, it's probably best to hire an expert to get it done. Typically you'll need to make some adjustments to the theme in addition to this so it scales properly on mobile and things like that. What I posted though will get you like 60-70% of the way there.

Shopify Partner
1547 212 573

Yup, Eric has pointed you in the right direction. Slick is a really robust and adjustable javascript slider. If you have questions about it be sure to go into the comments section toward the bottom, lots of people have probably already had similar problems you'll encounter. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Excursionist
22 0 9

Are arrows in a normal image slideshow also possible?  with the same accepted solution here?

thanks!

0 Likes
Shopify Staff
Shopify Staff
2664 249 536

Hey Guys! Can the inserted Code not come into conflict with the already installed slide-selector in the Narrative theme as in Donnie's case (see Donnie's parallel threads)?

Gabe | Social Care @ Shopify

 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Als Lösung anerkennen 

Wenn nicht, einfach das Thema in die Suchleiste oben eingeben oder in unserem EN Forum vorbeischauen (siehe den Sprachen-Regler ganz oben rechts). Besuche auch unseren Help Center oder unseren Shopify Blog.