Hello. Just copy the code in the custom CSS of the slideshow.
Topic summary
Goal: Hide slideshow pagination/arrows (controls) in Shopify’s Dawn theme while keeping auto-rotate.
What worked:
- Adding CSS to hide controls: set .slider-buttons to display: none. Several users edited Assets > component-slider.css (e.g., around line ~315) and changed .slider-buttons { display: flex; } to display: none; Confirmed for slideshow and featured collections.
- Initial CSS also worked for the homepage slideshow; auto-rotate remained after clearing cache.
Issues/caveats:
- Deleting lines in slideshow.liquid was not reliable.
- Some reported that mobile still shows dots or they reappear on swipe, creating a glitchy look.
- Changing .slider-buttons globally can impact other components (e.g., removes the announcement bar’s controls, and possibly the bar itself for some setups).
- Question about changes being overwritten by theme updates remains unanswered.
Suggested refinements:
- Scope the CSS to a specific section by placing it in that section’s Custom CSS field to avoid site-wide side effects (e.g., on the announcement bar).
Status: CSS-based solutions exist and work for many, but edge cases (mobile behavior, announcement bar impact, update persistence) are unresolved. Attachments show code locations but aren’t essential to follow the steps.
