Removing the arrow bar on slideshow Dawn theme

Store Design
,

Topic summary

A user seeks help removing the slideshow control bar (arrows and pause button) from their Dawn theme store. Multiple solutions are provided:

Primary Solutions:

  • Add CSS code .slideshow__controls { display: none; } to the Custom CSS section in theme settings
  • Alternatively, edit component-slider.css file directly and change .slider-buttons display property from flex to none
  • Another option: add slideshow-component .slider-buttons { display: none !important; } to Custom CSS

Follow-up Issue:
After implementing the fix, a small line remains visible on mobile. A solution is provided to edit section-image-banner.css and add display: none; within a specific media query for mobile screens.

New Problem:
One commenter reports that applying the CSS fix inadvertently hides their announcement bar, with no resolution yet provided.

One respondent also suggests using the EasyEdits app as a no-code alternative for making visual changes to the site.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I am using the dawn theme and my URL is carcleansweden.se. I would like to get some help with removing the whole bar where the arrows and the pause button are located:

CarCleanCC_0-1733788710236.png
CarCleanCC_0-1733788710236.png2566×1346 374 KB

I would hugely appreciate the help!

2

Hi. This is a simple change. Navigate to your theme in the Shopify Admin. Under “Home page”, find the section for this slideshow. This theme does not have a setting to show/hide the slideshow controls, so add the following under “Custom CSS”:

.slideshow__controls {
    display: none;
}

Then save and publish.

If you want to add a setting to the admin dashboard in order to control showing/hiding of these controls in the future, reach out and I can configure your code to set this up.

1 Like
3

Hi @CarCleanCC

  1. Edit theme code.

Kyle_liu_0-1733794565515.png
Kyle_liu_0-1733794565515.png1670×945 184 KB

2.Find the component-slider.css file

Kyle_liu_1-1733794705997.png
Kyle_liu_1-1733794705997.png1421×973 48.1 KB

  1. Find ‘.slider-buttons’ in the file and change ‘display: flex;’ to ‘display: none;’

Kyle_liu_2-1733794974979.png
Kyle_liu_2-1733794974979.png1219×447 8.41 KB

1 Like
4

Hi @CarCleanCC

Please add this code to Custom CSS in Online Store > Themes > Cutomize > Theme Settings

slideshow-component .slider-buttons { display: none !important; }
5

Thank you that worked. But now I have a small line that didn’t go away:

CarCleanCC_0-1733795624884.png
CarCleanCC_0-1733795624884.png434×417 64.6 KB

Is it possible to remove or maybe change background color for the slider to black?

6

In the same way, locate the ‘section-image-banner.css’ file and find

@media screen and (max-width: 749px) {

.banner–mobile-bottom .banner__media {

in the file
Add ‘display: none;’

@media screen and (max-width: 749px) {
    .banner--mobile-bottom .banner__media, .banner--stacked:not(.banner--mobile-bottom) .banner__media {
        position: relative;
        display: none;
    }
}
7

Hi! Looks like everyone has dropped lots of code for you to try. Normally I’d write that out and give it to you as an option, but I think you have plenty haha. I did want to just put EasyEdits out there as an option. It’s an app that I made that lets you just click and change your site, like a WYSIWYG editor. So you can just select the element and hide it, without any code. You can also make the edits on a free trial and delete the app, while keeping the edits, without paying for anything!

Let me know if you happen to give it a try or if I can help in any way, best of luck!

8

This works, but now my announcement bar is no longer visible. Any ideas?