Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

How to remove Slideshow Pagination on Dawn Theme

NathaliaChua
Tourist
6 0 3

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 462

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 16 (16)

Nick_Marketing
Shopify Partner
1487 336 462

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 462

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 3

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 462

@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 3

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.

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