How to add Slideshow Dots In Responsive Theme

Store Design

Topic summary

A Shopify store owner using the Sense theme (v9.0.0) wanted to replace numbered slideshow indicators with dots and enable auto-rotation.

Initial Solution:

  • No coding required for basic dot indicators
  • Change slideshow style from “counters” to “dots” in theme customization settings
  • However, dots initially appeared below the image rather than overlaid on it

Desktop Fix:
CSS code added to theme.liquid file (above </body> tag) repositions dots over the image using negative margin and adjusts styling:

  • margin-top: -45px moves dots upward
  • z-index: 2 ensures proper layering
  • Custom white color styling for better visibility

Mobile Issue:
Multiple users reported the desktop CSS (wrapped in @media screen and (min-width: 750px)) doesn’t affect mobile views, leaving dots below images on phones. One user also noted dots overlapping the hamburger menu.

Mobile Solution:
A later contributor suggested using the same CSS without the media query wrapper to apply positioning across all screen sizes.

The discussion remains open regarding optimal mobile implementation and potential menu overlap conflicts.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
7

@MyMawduh Your welcome

For white color use below code:

@media screen and (min-width: 750px){ .slideshow__controls { margin-top: -45px; z-index: 9999; } .slider-counter__link--dots .dot { background-color: #fff!important; } .slider-counter__link--active.slider-counter__link--dots .dot{ border:1px solid #fff!important; } }
1 Like