Product gallery - navigation bullets (dots?)

Site URL: http://www.woodboxworkshop.com

I just launched my site and the biggest negative feedback is, on the mobile version of the site, product pages seem to only have one image.

The products gallery pages do actually have multiple images, but the only indicator is in the top right of the image and no matter what colour I use it is not clear that there is multiple images. see attached.

Is there a line of code to add navigation bullets (dots?) underneath the product gallery photo? (see attached)

Thanks in advance!

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

@tuanphan Thank you so much! worked perfectly! This is great!!

I also need help with this, the code is not working for my site.
Please help

site is janedottie.com

On 2/24/2021 at 2:08 AM, janedottievintage said:

I also need help with this, the code is not working for my site.
Please help

site is janedottie.com

Can you share link to a product? We can help easier

On 2/28/2021 at 10:21 AM, tuanphan said:

Can you share link to a product? We can help easier

https://www.janedottie.com/scrunchies2/p/social-butterfly-embroidered-scrunchie

On 3/4/2021 at 1:06 AM, janedottievintage said:

https://www.janedottie.com/scrunchies2/p/social-butterfly-embroidered-scrunchie

Add this to 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;
}
.ProductItem .product-item-gallery-carousel-control::after, .ProductItem .product-item-gallery-carousel-control::after {
    border-color: black !important;
}
}

Hey @tuanphan

I'm looking to do the same, but not for a product gallery page. I have a testimonial slider on my homepage (built from blog posts + a summary block). For now, I have arrows underneath, but I would like to have bullet points instead. I tried the code above, but no luck. Any advice? I'm working in 7.0.

Website is: https://bruisedgoods.com

PW: bruisernation  (website is locked)

On 6/25/2022 at 8:16 PM, laurenkilbane03 said:

 

Hey @tuanphan

I'm looking to do the same, but not for a product gallery page. I have a testimonial slider on my homepage (built from blog posts + a summary block). For now, I have arrows underneath, but I would like to have bullet points instead. I tried the code above, but no luck. Any advice? I'm working in 7.0.

Website is: https://bruisedgoods.com

PW: bruisernation  (website is locked)

The only way to have Nav dots is to buy a plug-in. https://www.sqspthemes.com/plugins/gallery-dot-nav (on 7.0)