How to remove Slideshow Pagination on Dawn Theme

Solved

How to remove Slideshow Pagination on Dawn Theme

NathaliaChua
Tourist
6 0 4

Hi,

 

I have added a slideshow to homepage as a banner but as it automatically scrolls through the images I would like to remove the pagination / arrows / controls panel at the bottom of the slider.

 

Store URL - www.movinka.com.au

 

Advice appreciated thank you.

Accepted Solution (1)
Nick_Marketing
Shopify Partner
1487 336 465

This is an accepted solution.

Try adding this code to the bottom of component-slideshow.css

.slideshow__controls.slider-buttons.no-js-hidden {
  display:none;
}
Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

View solution in original post

Replies 19 (19)

Nick_Marketing
Shopify Partner
1487 336 465

Consider adding a store URL so that devs on the forum can look into the .CSS.

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
Nick_Marketing
Shopify Partner
1487 336 465

This is an accepted solution.

Try adding this code to the bottom of component-slideshow.css

.slideshow__controls.slider-buttons.no-js-hidden {
  display:none;
}
Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
NathaliaChua
Tourist
6 0 4

Hey @Nick_Marketing!

 

Thanks this removed the navigation but now the auto slide is gone and only manually switches to the next image with a swipe (which new visitors would not know to do).

 

Any advice here? I have updated on my website so you can see how it is currently with the above code is the css.

 

Thanks again

Nick_Marketing
Shopify Partner
1487 336 465

@NathaliaChuaThe slider switches banners automatically on my end, no swipes required. Desktop and mobile. Maybe a cache issue.

In case the CSS rule provided does not work as expected, you can always remove it.

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
NathaliaChua
Tourist
6 0 4

Yes it must have been a cache issue as it is working now. Thanks so much @Nick_Marketing !

groundz
Tourist
10 0 2

Hi Nick,

 

Would you know how to do this to the Featured Collection section of the dawn theme? i don't want the pagination showing under the actual slider on mobileScreenshot_4.jpg

seismic
Visitor
2 0 0

Hey Nick! I'm having the same issue too, but unsure on where to paste the code?

seismic
Visitor
2 0 0

Hey @Nick_Marketing  I'm having the same issue too, but unsure on where to paste the code?

Exproarzana
Shopify Partner
2 0 0

Wow! It was a great and easy solution.

tom890
Visitor
2 0 0

Will this code be overwritten if the theme is updated?

Riyanne23
Visitor
2 0 0

This only hides it on laptop not mobile. and if it can be revealed again if you accidentally swipe up on the section so it just looks glitchy.

sajjad_bronoun
Visitor
2 0 0

Hi @Nick_Marketing I added this at the bottom of the component like you guided but the scroll dots are still there. And for me it is not a cache issue as I cleared cache, tested on incognito and also across other devices where the website previously wasn't opened. What can I do?

TxDCV
Visitor
3 0 0

Coding is gibberish to me still... But I went to edit code, the sections folder, slideshow.liquid, and deleted lines 137-184 then clicked save. It got rid of the previous and next sliders on desktop and mobile.

TxDCV
Visitor
3 0 0

Nevermind it didn't work....

aion04
Visitor
3 0 0

same situation , didn't work... the code work just for slider banner ... for collection list or featured prod or multicoll didn't work , I try many methods but no working..

 

someone can help please ?

 

I use Dawn theme

TxDCV
Visitor
3 0 0

Assets... component-slider.css change the display from FLEX to NONEf.png

aion04
Visitor
3 0 0

Respect mate now work very well this code,

have a nice day 

Helper12345
Visitor
1 0 0

For those who still seek the answer for the Shopify Dawn Theme. 

Here's your solution:

 

First go to the active theme you're using (Dawn in my example).

> Click on the three dots > Click on "Edit code".

> Locate component.slider.css (you can easily find this in the search bar on the lefthand side on your screen).

> Scroll to line 315 until you found the following code: "

 

.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}

 

Found it? 

Fantastic!

Now let's change this code into the following:

 

.slider-buttons {
display: none;
align-items: center;
justify-content: center;
}

 

Click "update" or "save" in the righthand side of your screen, and enjoy! 🙂

Farmasia
Visitor
1 0 0

The problem with that is that it removes the announcement bar too. Any solutions for that?