Add arrows to slideshow on Shopify Debut theme

Highlighted
New Member
2 0 1

How can I add arrows to slideshow on homepage? 

0 Likes
Highlighted
Shopify Expert
9852 98 1617

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
1 Like
Highlighted
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?

1 Like
Highlighted
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
Highlighted
Tourist
6 0 0

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

0 Likes
Highlighted
Tourist
6 0 0

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

0 Likes