Make mobile product details page image carousel more obvious

Hi, I'm looking for some help with the product details pages on my web store. On mobile, I'm concerned that users may not notice that the images are scrollable when the black left/right arrows are against a dark background.

Good example: https://catherineamesbury.com/shop/p/bella-pearl-bracelet

On the desktop site there is a list of tiny previews of each image, which is perfect. I would love to have something like that on mobile if possible, but as far as I can tell there's no such feature built into the template I'm using.

It also occurred to me that it might be easier to just add a faint white box around the arrows, as is default when the section format is set to Wrap, Full, or Half. I'm quite keen to keep it on Simple though as this looks best on desktop.

Many thanks!

Hi,

How about adding a background color behind arrows? If you like this, we can give some custom code to add it

Hi, that sounds perfect, thank you so much!

On 11/25/2022 at 6:10 AM, catherineamesbury said:

Hi, that sounds perfect, thank you so much!

Try adding this to Design > Custom CSS
 

/* Product image arrows mobile */
@media screen and (max-width:767px) {
.ProductItem-gallery .enable-on-first-image-load.enabled>button {
    background-color: #f1f;
}
}

Thanks so much! They're magenta, but I was able to fix that and add some transparency by changing the colour to #fff8

However, it's not showing up on my actual mobile. The mobile preview in desktop looks great and I've hit save, but it's not working in practice. Any idea what could be causing that?

you can also use this attribute

background-color: rgba(255,255,255,0.5);

Any idea how I might get the arrow to be in the middle of the box?

On 11/29/2022 at 9:08 AM, catherineamesbury said:

Any idea how I might get the arrow to be in the middle of the box?

Use this CSS

.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-prev:after {
    position: relative;
    left: 10px;
}
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control.ProductItem-gallery-next:after {
    position: relative;
    right: 10px;
}