Product Carousel & Slideshow UI and Navigation Arrows Missing on Mobile in 7.1

10 hours ago, tuanphan said:

How to.

Not clear on what was in this link. Looked like a lot of code. I tried to fix the issue by changing the word "white" in the code you provided above to "black" hoping it would change the color of the arrows, but it didn't work. The arrows remain thin and black, which doesn't show up against the dark background of my photos. I included a photo of what this looks like on my squarespace site. Any help is much appreciated with altering the code (to produce white arrows instead of black). Thanks again!!

5 hours ago, gmoss said:

Not clear on what was in this link. Looked like a lot of code. I tried to fix the issue by changing the word "white" in the code you provided above to "black" hoping it would change the color of the arrows, but it didn't work. The arrows remain thin and black, which doesn't show up against the dark background of my photos. I included a photo of what this looks like on my squarespace site. Any help is much appreciated with altering the code (to produce white arrows instead of black). Thanks again!!

I worked mine out. It's actually is a colour setting. If you go into your design panel>colours>select what theme it is and edit, then scroll to find the 'gallery icons' colour under 'product detail page' and change it there, that might hopefully work for you! 

10 hours ago, timbm said:

I worked mine out. It's actually is a colour setting. If you go into your design panel>colours>select what theme it is and edit, then scroll to find the 'gallery icons' colour under 'product detail page' and change it there, that might hopefully work for you! 

YOU ARE A GENIUS!!!! That worked and I'm so relieved!! Thank you so much. I followed your directions (definitely would not have found my way without them since there are so many options and subheadings in that design drop down). You've saved the day. 🙂

On 9/26/2020 at 6:45 PM, tuanphan said:

Try adding to Home > Design > Custom CSS for product carousel

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

 

Yes! Thank you, can confirm this works to add arrows for other images on mobile.

Dear @tuanphan

This code seems awesome but it did not work on my site. I'm using Brine Marta template 7.1 

One of my store pages: https://www.bad-obsession.com/shop/cbhqba3yw0cps7i8k0arpy7329v4i2

Code: bobo007

There does not seem to be a carousel option to display product pictures on the product details pages (only main picture with thumbnails underneath or stacked). Can I still use a CSS code for arrows?

Thank you in advance for your kind help

toniohb

On 1/8/2021 at 9:06 AM, toniohb said:

Dear @tuanphan

This code seems awesome but it did not work on my site. I'm using Brine Marta template 7.1 

One of my store pages: https://www.bad-obsession.com/shop/cbhqba3yw0cps7i8k0arpy7329v4i2

Code: bobo007

There does not seem to be a carousel option to display product pictures on the product details pages (only main picture with thumbnails underneath or stacked). Can I still use a CSS code for arrows?

Thank you in advance for your kind help

toniohb

The code for SS 7.1 only. I give another solution in another your post.

I am also having issues with this! The code that was provided was great for adding arrows to the specific product page but my client would also like it on the shop pages (this page for example: https://www.roastgreetings.com/birthday )

It is great for desktop with the hover mode but not ideal for mobile mode. Can anyone help with this?
Thanks in advance!

On 6/10/2021 at 10:51 AM, PamCheney said:

I am also having issues with this! The code that was provided was great for adding arrows to the specific product page but my client would also like it on the shop pages (this page for example: https://www.roastgreetings.com/birthday )

It is great for desktop with the hover mode but not ideal for mobile mode. Can anyone help with this?
Thanks in advance!

You mean add there? Impossible..

http://i.prnt.sc/OE3R05HPSL_pSTgWDgOflw.png

@tuanphan the link you send through does not work, but I mean here (see red arrows attached)

12 hours ago, PamCheney said:

@tuanphan the link you send through does not work, but I mean here (see red arrows attached)

Hi. This is not possible

@PamCheney

It is definitely worth putting in a feature request in to SS customer service. If they can provide the functionality on the detail page, why not have it available for mobile on the product grid?

In the mean time I have an idea for a workaround. Would it work for your client to have the images auto switch every so many seconds. Not ideal but it would hopefully let folks know about the two states of the media they are selling.

What do you think?

Hey! Sorry for the late response! Ya that could be a great work around - how would I code this?

@PamCheney

Please see Auto Change Product Grid Image Opacity on Touch Screen Device.

Let us know how it goes.