Add arrows to slideshow on Shopify Debut theme

New Member
2 0 1

How can I add arrows to slideshow on homepage? 

0 Likes
Shopify Expert
10008 116 1844

That theme uses a slider called "slick" and it does have built in functionality for adding arrows. Jump into your theme.js.liquid file and search for a section like this (near the middle of that file):

this.settings = {
  accessibility: true,
  arrows: false,
  dots: true,
  fade: true,
  draggable: true,
  touchThreshold: 20,
  autoplay: this.$slideshow.data('autoplay'),
  autoplaySpeed: this.$slideshow.data('speed')
};

The important line in that is this one:

arrows: false,

Change it to:

arrows: true,

You may need extra CSS to make the arrows look good so be sure to make this change in a theme copy only and not your live theme.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
New Member
2 0 1

Thank for solution, when I changed to true. It did showed on slideshow but why does it show on top right and left instead of middle of slideshow?  Is there a way to bring down to middle?

Shopify Partner
1 0 0

Hola, lo que debes hacer para modificar la ubicación de las flechas es lo siguiente:

Accede a theme.scss

Busca el siguiente codigo:

.slick-prev,
  .slick-next {
    top: 0; 
    height: 100%;
    margin-top: 0;
    width: 40px;

La línea que nos importa es: top:0; Yo le cambie por: top: 238px; y me sirvió, ya solo es cuestión de que la modifiques a tus espacios y listo.

Saludos!

julio@ticsu.biz Participando en el Shopify Partner Studio, especialista en E-commerce, Marketing, Sistema de Punto de Venta (POS) y Sistemas ERP (Integración con Shopify). Ayudamos a las empresas a vender más y ampliar sus canales de venta. Móvil/Whatsapp +52 55 4516 1250
0 Likes
Tourist
6 0 0

It does not work for me, I have Debut theme too. What can I do?

0 Likes
Tourist
6 0 0

It does not work for me, I have Debut theme too. What can I do?

0 Likes
Tourist
3 0 5

Maybe this has already been addressed somewhere else but I'm wondering if this fix can be used to add arrows to product images as well, specifically on product pages? 

@JaneRichmond @Moshe_Begim @adalid-bori @Julio_Cesar_Go1 

I have coded a custom solution for this. You can not only use arrows but also swipe.

Here is the tutorial of how to install it and here is the live preview of the Debut theme working with arrows.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Available for hire! Same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ Upgrade your theme for free with code snippets coded by me. Just click here!
0 Likes