Jump to content

Make mobile product details page image carousel more obvious

Go to solution Solved by catherineamesbury,

Recommended Posts

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!

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

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

 

Edited by catherineamesbury
correction, not having to make a third post in a row
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.