I want to add functioning arrows on top of slideshow images

Store Design

Topic summary

Goal: Add visible left/right arrow controls over slideshow images (far left/right) in the Shopify Studio theme after removing the dots/number counter. An example screenshot and the store URL were provided.

Attempted solution: A community member shared CSS to place arrows on top of the slideshow by:

  • Hiding dots and autoplay controls.
  • Absolutely positioning the slideshow controls at mid-height across the full width.
  • Styling arrow icons in white and anchoring prev to the left and next to the right.
  • Instructions were to add this to component-slideshow.css.

Result: The suggested CSS produced no visible changes on the site according to the requester.

Current status: Unresolved. The requester has followed up multiple times asking for further assistance. The screenshot example is central to understanding the desired arrow styling and placement.

Summarized with AI on December 31. AI used: gpt-5.
1

I have removed the dots/number counter from below the slideshow with this code:

.slideshow__controls.slideshow__controls–top.slider-buttons.no-js-hidden {
display: none !important;
}

Now I would like to add white or translucent arrows on top of the slideshow images to the far right and far left. Here is an example from another website:

Screenshot 2024-02-22 182918.png
Screenshot 2024-02-22 182918.png1048×348 529 KB

I have the studio theme and my website is www.inspirelightwork.com

Thank you!

2

Hey @lightwork ,

Please add this CSS to the component-slideshow.css

#shopify-section-template--21536113230134__c8432bbd-72a7-4418-b202-d97baf948c7f .slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    /* display: none !important; */
}

.slider-counter.slider-counter--dots {
    display: none;
}
.slideshow__autoplay.slider-button.no-js-hidden {
    display: none;
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    position: absolute;
    top: 50%;
    border: none;
    width: 100%;
    z-index: 999999;
}
.slider-button .icon {
    height: 3.6rem;
    color: #fff;
}
.slider-button.slider-button--prev {
    position: absolute;
    left: 0px;
}
.slider-button.slider-button--next {
    right: 0;
    position: absolute;
}

Thanks,

Ritu

3

It didn’t do anything unfortunately!

4

is there a way to boost this? I still need help with this issue

5

can you still help me with this?