remove arrows under dawn theme slideshow

Shopify Discussion

Topic summary

A user seeks to remove navigation arrows, play/pause buttons, and a faint border line from the Dawn theme slideshow, while also repositioning the navigation dots to the bottom right.

Solution Provided:

  • Edit the themeā€™s CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add custom CSS code to hide slider buttons and remove borders
  • Code was refined through iterations to address all specific elements

Final CSS targets:

  • Navigation arrows (previous/next buttons)
  • Play/pause autoplay button
  • Border line under slideshow
  • Repositions control dots to bottom right corner

The solution successfully resolved all requested modifications. The user confirmed the code worked as intended.

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

How do I remove the arrows under the slideshow on dawn theme? if possible id also like the dots on the bottom right of the picture. there is also a faint line under the slideshow like a border id like removed

1 Like
2

Hi @Spujeh

Like this?

Made4uoRibe_0-1731778491617.png
Made4uoRibe_0-1731778491617.png1903Ɨ158 81.3 KB

If it is check this one.

  1. From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€.
  2. Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  3. In the ā€œAssetsā€ folder, click on ā€œbase.css, style.css or theme.cssā€ file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
button.slider-button.slider-button--next, button.slider-button.slider-button--prev {
    display: none;
}
.slideshow__controls, .slideshow__autoplay.slider-button {
    border: 0;
}

.slideshow__controls.slideshow__controls--top.slider-buttons {
    justify-content: right;
}
  • And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

will this remover the arrows , play button and the border?

4

Please review the result, which one is removed. Would you like to remove the play/pause button as well?

1 Like
5

yes, I would like to remove the pause and play buttons and remove the arrows . I also want the border removed

6

IMG_8247.jpeg
IMG_8247.jpeg1284Ɨ2778 302 KB

Iā€™ve circled The faint line I want removed plus the play and pause button . Is there also a way to make the dots on the bottom right of the image

7

Got it, please replace on this code below.

.slideshow__controls, .slideshow__autoplay.slider-button {
    border: 0 !important;
} 

.slideshow__controls.slideshow__controls--top.slider-buttons {
    position: absolute;
    right: 0;
    bottom: 0;
}

button.slider-button.slider-button--next, button.slider-button.slider-button--prev,
button.slideshow__autoplay.slider-button {
    display: none;
}

.slideshow__controls.slideshow__controls--top.slider-buttons {
    justify-content: right;
}

And Save.

Result:

Made4uoRibe_0-1731796076780.png
Made4uoRibe_0-1731796076780.png1176Ɨ338 185 KB

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

2 Likes
8

thank you! that worked

9

Welcome! Would you mind hitting ā€˜likeā€™ as well? Thanks!

1 Like
10

thanks buddy