Stiletto Theme - How to add "three buttons"(on mobile swipe) for the featured collection slider?

NewYorkais
Tourist
24 0 3

We are using the stiletto theme for our Shopify store. My customers are complaining (they skew older demographic) that the home page "featured collection slider" section on mobile version is hard to navigate/shop because there are no dots or arrows indicating that they can swipe for more products (like they do for multiple images on product page for mobile. Mobile version of the featured collection slider is misleading. Moreover, the theme only lets 1 or two columns...so when I choose two, there are some extra text from the third product peeking from the mobile page..which customers have said is visually distracting from the experience...which I can somewhat agree.

 

Is there any way to incorporate the three dots or arrow below the featured collection slider? We just don't want to deter customers and future customers from using the site (or not having the site fully optimized). 
Replies 5 (5)

Salil17
Shopify Partner
86 5 12

Most of the time themes use some kind of libraries for the slider feature. First you need to find out, which slider your theme is using then just type the library name and your problem in google. You'll definitely get some suggestions. 

NewYorkais
Tourist
24 0 3

How do I figure out which type of slider my theme is using? Can you advice?

Salil17
Shopify Partner
86 5 12

Swiper slider

NewYorkais
Tourist
24 0 3

ok thank you, now i'm that I have the information, it's slightly confusing which liquid pages I need to implement, and which codes are necessary for this specific section (featured collection)

Salil17
Shopify Partner
86 5 12

There is no direct solution for this, first you need to find where the swiper slider code is written, then after only you able to modify it.

 

the code is kind of similar -

 

<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
 
You have to add the pagination in your current one, if already present. Then need to debug why it's not working.