How to remove slideshow dots and add arrows in Dawn

Store Design
, , ,
1

Hi all,

My website is https://store.strokefoundation.org.au and I was wanting to know if anyone knew how to add arrows to the slideshow section? I’ve already managed to hide the controls and auto rotate but I would also like people to have the option to click through manually using the arrows which would have a HEX of #1C256A.

This is what the section looks like now:

BEFORE.png
BEFORE.png1200×600 23.7 KB

This is what I would like the section to look like with the arrows:

AFTER.png
AFTER.png1200×600 24 KB

If possible can these changes be done by adding code to the base.css file? All good if not.

Thank you!

2

Hi @strokefdn , you must customize slideshow.liquid file and add code in base.css file. Recommend hire an expert to do it for you.

3

Hello @strokefdn ,

You can try to follow these steps:

Go to Online Stores → Themes → Actions → Edit code

Go to Assets folder → theme.js file → find this code looks like this:

$('.hero__slideshow').slick({
  dots: true,
  arrows: false,
  autoplay: true,
  autoplaySpeed: 5000
});

Change “arrows: false” to “arrows: true” to enable the display of arrows.

Add the following code to the same section to replace the default arrow icons with custom arrow icons:

prevArrow: '',
nextArrow: ''

Go back to Assets folder → base.css file → add this following code at the bottom of page

.slick-prev, .slick-next {
  color: #1C256A;
}

Save and preview.

Hope this can help you out.

Ali Reviews team.

4

Hi, thanks for your suggestion! I can’t see ‘theme.js’ but I can see a ‘theme-editor.js’. Is this the same thing?