How to fix the position of the autoplay button on slideshow

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user encountered an issue where the autoplay button on their slideshow shifted slightly to the right when toggled from play to pause. They wanted the button to remain in a fixed position regardless of its state.

Solution provided:

  • Add custom CSS to the theme’s stylesheet (theme.css or base.css)
  • The CSS targets the second SVG wrapper element and applies a right margin of 31px with !important flag
  • This prevents the button from shifting position when clicked

Outcome:
The solution successfully resolved the positioning issue. The user confirmed it works as intended.

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

Hi, I enabled autoplay for my slideshow, and when I turn it off (pause it), the button shifts slightly to the right. I’d like to make it stay in the exact same position even after clicking it, basically prevent it from moving at all.

I mean these buttons:

CreatorTim_0-1746097782090.png
CreatorTim_0-1746097782090.png1852×839 67.9 KB

Here’s my store: https://creationwithtim.com/products/cinematiq-lut-collection-copy
(Just scroll all the way down there’s the slideshow)

Thanks,

Tim

2

Hi @CreatorTim ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.slideshow__autoplay .svg-wrapper:nth-of-type(2) {
    margin-right: 31px !important;
}

Thanks!

1 Like
3

Thank you! It works