How to adjust Slide arrows for product photos

Store Design
,

Topic summary

A user seeks to reposition product photo slide arrows to appear within the image area (on the sides) rather than below it, to save screen space and improve usability.

Initial Solutions Provided:

  • Two community members offered CSS code snippets to adjust arrow positioning by modifying theme files (base.css/theme.css) or using the Custom CSS section in Theme Settings.
  • The code targets .slider-buttons class, adjusting margins and z-index to overlay arrows on images.

Refinement Requests:

  • User requested both left and right arrows remain consistently black (not grayed out when disabled).
  • Arrows needed to be positioned slightly higher on the image.

Final Solution:

  • Updated CSS code provided using media queries for mobile screens (max-width: 768px).
  • Forces arrow color to black using fill: black !important and color: black !important.
  • Adjusts vertical positioning with margin-top: -90px.
  • Includes styling for disabled state to maintain black color.

Status: Resolved - User confirmed the solution worked with a thank you message.

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

How do I have the slide arrows be like the picture on the right where it’s in the product photos and on the sides. That way, it saves space on the screen and is easier to click.

samueljoonjung_0-1740959049741.png
samueljoonjung_0-1740959049741.png783×1433 75.5 KB

samueljoonjung_1-1740959077451.jpeg
samueljoonjung_1-1740959077451.jpeg184×398 7.52 KB

2

Hi @samueljoonjung,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.slider-buttons.quick-add-hidden {
    margin-top: -56px;
    margin-bottom: 37px;
    display: flex !important;
    justify-content: space-between;
    z-index: 9999999 !important;
    position: relative !important;
}

.slider-counter.caption {
    display: none !important;
}

.slider-button .icon {
    height: 1.6rem !important;
}
3

Hi @samueljoonjung

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

4

Yea of course. The URL is www.whoglobal.shop

5

That’s so close but I would like both arrows, left and right arrows, to always stay black. And I would also like them a little higher

samueljoonjung_0-1740970599874.png
samueljoonjung_0-1740970599874.png765×1203 86.8 KB

6

HI @samueljoonjung

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.slider-buttons> button.slider-button span.svg-wrapper svg {
    fill: black !important;
    color: black !important;
}
.slider-buttons {
    margin-top: -90px !important;
}
}

Here is the result:

image_720.png
image_720.png350×720 49.6 KB

I hope this helps

Best,

Daisy

7

Try this code.

.slider-buttons.quick-add-hidden {
    margin-top: -56px;
    margin-bottom: 37px;
    display: flex !important;
    justify-content: space-between;
    z-index: 9999999 !important;
    position: relative !important;
}

.slider-counter.caption {
    display: none !important;
}

.slider-button .icon {
    height: 1.6rem !important;
   color: black !important;
}

.slider-button[disabled] .icon{
 color: black !important;
}
8

Thank you very much