How to fix merged pause and resume buttons on Dawn theme slideshow?

Store Design
,

Topic summary

Main issue: After moving slideshow controls in the Dawn theme via CSS, the pause and resume buttons appeared merged (screenshot referenced). User also wanted the navigation dots to be white.

Key details:

  • CSS used positions .slideshow__controls absolutely and centers it at the bottom for wider screens. An image was attached showing the merged pause/resume buttons.
  • A respondent requested a preview link to inspect element names and advise styles.

Update from original poster:

  • Successfully changed the dots’ color to white.
  • Did not fix the merged pause/resume buttons; instead, removed/hid the pause/resume control via code (exact snippet not shown in the thread).
  • New goal: remove the left/right arrows adjacent to the dots and restyle dots to be hollow (transparent fill, white outline), with only the active dot filled solid white.
  • Preview link provided for further review.

Status:

  • Partially addressed (dot color changed; pause/resume hidden).
  • Open items: CSS to remove arrows and implement hollow/active dot styling. Further guidance requested; no final resolution yet.
Summarized with AI on January 8. AI used: gpt-5.
1

Hello,

I’m currently using the Dawn theme, and I came across a posted question about moving the slideshow dots inside the slides. The response provided a solution, but I noticed an unusual issue where the pause and resume buttons are merged together (image attached).

Here’s the code I used:

<style>
  @media screen and (min-width: 749px){
    .slideshow__controls {
        position: absolute;
        bottom: 0;
        z-index: 9;
        left: 50%;
        transform: translateX(-50%);
        border: none;
    }
  }
</style>

Does anyone have a solution to this issue? Additionally, I’m curious if anyone happens to know how to make the dots white.

Thanks in advance!

2

Hi,

Can you share your preview link and we can see the element name and what style to add

3

Since sharing the previous content, I’ve been experimenting with adjustments. I successfully changed the color of the dots to white and instead of resolving the combined pause/resume button, I opted to eliminate it using the provided code:

Currently, I’m focused on removing the arrows beside the dots and ideally having the dots hollowed out with a transparent background and a white outline and only for the dot representing the slide showing to be filled in with a white background.

Any guidance on achieving this would be greatly appreciated!

My preview link is attached below:

https://c28uo555ov75xq82-67870589140.shopifypreview.com