How to adjust Slide arrows for product photos

[samueljoonjung]

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. 

[CodingFifty]

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;
}

[samueljoonjung]

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 

[CodingFifty · Accepted solution]

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;
}

[samueljoonjung]

Thank you very much

[DaisyVo]

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?

[samueljoonjung]

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

[DaisyVo]

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: 

I hope this helps

Best,

Daisy