How to alter slideshow controls in Studio Theme?

Store Design

Topic summary

Goal: Change Shopify Studio theme slideshow controls from bottom dots to large left/right arrows in the Shopify Studio theme (slideshow = image carousel; controls = navigation UI).

Progress: After sharing the store URL and reference screenshot, code was provided to edit Assets > component-slider.css to hide autoplay and dot counter and style large arrow buttons (positioned mid-left/right, 80×80px, responsive sizing).

Current issue: The arrows now display but do not advance slides when clicked. The requester also wants the arrow color set to #9B6FA5.

Suspected cause: The slideshow image was made clickable; the user wonders if the full-image link is intercepting clicks, and asks for both behaviors simultaneously: arrows navigate slides; clicking elsewhere on the image opens its link.

Status: No final fix yet. Further guidance is needed to enable arrow click functionality alongside a clickable slide and to apply the requested arrow color.

Notes: Screenshots were used to confirm the desired look, and the provided CSS snippet is central to the visual change. The functional issue likely requires adjustments beyond CSS.

Summarized with AI on February 20. AI used: gpt-5.
1

Hey @KetanKumar

Do you know the code to change the slideshow controls on the Studio Theme from controls beneath the slideshow to large arrows like: < slideshow image > at either end of the image.

Example screenshot attached.

Thank you…you’re awesome!

1 Like
2

@PPUSA

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

Thank you, the site is zeldaandharley.com

1 Like
4

@PPUSA

thanks bt i can’t see your example attachment

5

Screen Shot 2022-04-06 at 2.01.47 PM.png
Screen Shot 2022-04-06 at 2.01.47 PM.png2550×1254 245 KB

1 Like
6

@PPUSA

can you please confirm this look?

KetanKumar_0-1649272443161.png
KetanKumar_0-1649272443161.png1920×1080 337 KB

7

Yes, that looks good!

Thanks for your help with this

1 Like
8

@PPUSA

thanks for confirm can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-slider.css ->paste below code at the bottom of the file.
.slideshow__autoplay.slider-button {
    display: none;
}
.slider-counter.slider-counter--dots {
    display: none;
}
.slider-buttons {
    border: none;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.slider-button {
    width: 80px;
    height: 80px;
}
.slider-button .icon {
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 749px) {
.slider-button .icon {
    width: 50%;
    height: 50%;
}
}
9

Thanks @KetanKumar

The arrows are presenting but don’t work when clicked.

Also, if it possible to make them this color: #9B6FA5.

Let me know if there’s a way to solve for these,

Thank you again!

10

Potentially this is happening as I changed the slideshow image to be clickable? Is there a way to do both? Progress slides by clicking on arrows and click to see the image link page by clicking anywhere else?