catherineamesbury

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

Update: Fixed it. For some reason my mobile browser didn't like the hex value with included alpha. Once I set that to a simple #FFFFFF it worked. So I googled and added the individual parameter for opacity which worked as well. I also decided to enable it on the desktop site for consistency.

Thanks again!

The code I landed on with regards to the arrows is:

/* product image arrows */
@media screen{
.ProductItem-gallery .enable-on-first-image-load.enabled>button {
    background-color: #FFFFFF; opacity:0.5;
}
}

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?

Hi, that sounds perfect, thank you so much!

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!