Add carousel arrow to variation images on mobile

Site URL: https://patchworkplus.ie/

On mobile, my product variations show as a carousel, to swipe through, which is fine, I'd just like to add an arrow to indicate this is what the customer needs to do. I'm finding that not everyone gets it right away. 

Does anyone know if this is possible and how I go about it?

Thanks so much.

Try adding to Home > Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

This is perfect, thanks! 

Hey tuanphan,

I see you all over the forums, thanks for all that you do. This was very helpful! How do I change the the size of the arrows on mobile?

Hi! I'm needing the same thing but the code offered is not working for me.

Wait! Nevermind! I figured it out....I needed to also add code to make the arrows a different color because my background is white.

Thanks for the work you do here! @tuanphan

On 3/6/2021 at 9:34 PM, Baker7m3 said:

Wait! Nevermind! I figured it out....I needed to also add code to make the arrows a different color because my background is white.

 

Thanks for the work you do here! @tuanphan

Do you still need help? Can you share link to a product?