How do I add 3 dots under my slider while also removing the pause button for it?

Store Design
1

So I am currently building my website, I’ve added bits of code as well as removed some. Yesterday I added a code (after I googled) so that the pause button on mobile for my slideshow would disappear. This has worked but the 3 dots that would have been under my slideshow on the home page has also disappeared, I am trying to get this back, can someone please help.

My website url is below:

https://ae64e6.myshopify.com/

2

Hi @ussamahc ,

Are you able to put back the code to its original? We will provide a different code to hide the pause button. I see that you remove the HTML code instead

3

Hi, yes I have put it back to the original. Essentially I would like to make that white bar disappear and reduce the distance of dots and the slideshow, whilst also keeping the dots white. And also hide the pause button.

4

Hi @ussamahc ,

Please follow the instructions below. NOTE: Right now, the pause button does not show since you did not have autorotate checked

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the base.css file.
  3. Add the code below.
.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    position: absolute;
    z-index: 12222;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.slideshow__controls .dot {
    border: #fff 1px solid;
}

.slider-counter__link.slider-counter__link--active .dot {
    background: #fff;
}

.slideshow__controls .slider-button {
    display: none;
}
1 Like
5

Many thanks, I got it to work. Could you perhaps help with changing the colour of the white bar?

Will mark as a solution either way :slightly_smiling_face:

6

Hi @ussamahc ,

Which white bar are we talking about?

7

Ive attached screenshots below for mobile and desktop. The white bar right below the slider, I kind of want to inverse it so that the bar is the same colour as the background and the dots are white instead.

Screenshot 2022-07-16 011915.png
Screenshot 2022-07-16 011915.png2535×1263 350 KB

Screenshot 2022-07-16 011958.png
Screenshot 2022-07-16 011958.png511×895 238 KB

8

@ussamahc Here you go.

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the base.css file.
  3. Add the code below.
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    filter: invert(1);
    background: #f0eded;
}
9

You are amazing! Thank you very much for your help!

1 Like