Add arrows to slideshow on Shopify Debut theme

Moshe_Begim
New Member
2 0 1

How can I add arrows to slideshow on homepage? 

0 Likes
Jason
Shopify Expert
10037 119 1872

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
Moshe_Begim
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?

Julio_Cesar_Go1
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
adalid-bori
Tourist
6 0 0

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

0 Likes
adalid-bori
Tourist
6 0 0

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

0 Likes
JaneRichmond
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.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Klforres
New Member
6 0 0

Hi! I use Debut but I don't have the theme.js.liquid file. Is this information somewhere else possibly?

0 Likes

@Klforres 

Hello!

Perhaps your file is named theme.js instead of theme.js.liquid as well. 

If you are using any Debut's version that's above 16.0.0 (the latest version of now is 17.9.0 if I'm not mistaken) the slider is going to work with no issues, though!

Anyhow, if you need help installing it just reach me out via email and I'll be more than happy to get it installed for you!

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes