How to overlay slideshow arrows on slides in Refresh theme?

Store Design
,

Topic summary

A user seeks to overlay slideshow navigation arrows directly on slides in Shopify’s Refresh theme, rather than having them positioned below the slideshow.

Proposed Solution:
A community member provides CSS code to be added to the base.css file that:

  • Repositions the slideshow controls to overlay on the slides
  • Hides the slide counter
  • Positions previous/next arrows on left and right sides
  • Centers arrows vertically at 50% height

Current Status:
The solution partially works but creates issues:

  • A pause button appears over the right arrow
  • Arrows are not functioning properly

Additional CSS was provided to hide the autoplay button. The discussion remains ongoing as the original poster still experiences display problems with the navigation controls.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi! Th Refresh theme only has the option to add arrows for a slideshow under the slideshow itself. Is there any code for making arrows overlay on the slides themselves? Photo for reference

Screen Shot 2023-02-10 at 12.18.34 PM.png
Screen Shot 2023-02-10 at 12.18.34 PM.png378×211 11.6 KB

1 Like
2

@TGamble

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @TGamble ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.slideshow__controls {
	position: static !important;
}
.slideshow__controls .slider-counter {
	display: none !important;
}
.slideshow__controls .slider-button {
	position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff !important;
}
.slideshow__controls .slider-button.slider-button--prev {
	left: 0;
}
.slideshow__controls .slider-button.slider-button--next {
	right: 0;
}
.slideshow__controls .slider-button svg {
	height: 2rem !important;
}

Hope it helps!

4

This almost worked, thank you so much!
This is how it ended up though-- a pause sign over the right arrow and arrows aren’t working. Any ideas? @Litos

Screen Shot 2023-02-14 at 2.14.13 PM.png
Screen Shot 2023-02-14 at 2.14.13 PM.png1768×744 61.7 KB

5

Thank you so much!
The site is fhblogostore.com

6

Thank you so much!
The site is fhblogostore.com
@KetanKumar

7

Hi @TGamble ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.slideshow__autoplay.slider-button {
    display: none !important;
}

Hope it helps!

8

how to autopay this slider ?

9

hello, I tried this code and the auto play button is still there… on top of the right arrow