Add dots under product image in product page

[basically]

This is my website on mobile

I don’t want to show the next image on the right side also add dots under the image to indicate there’s more images and make image height larger like the reference website shown below.

This is how i want it to be

[Dan-From-Ryviu]

Hi @basically

Could you try go to your Online store > Themes > Customize > Products > Default product > Product information > Mobile layout > select Show thumbnails option then I can provide the code

[basically]

Done.

[Dan-From-Ryviu]

Hi, are you using custom swatches variation?

[basically]

It’s Dawn theme, so yes I had to.

[Dan-From-Ryviu]

Customized swatches variation does not allow select images from non-selected variation so I cannot provide the code for the dots.

[basically]

What’s the alternate? I need to show color swatches too

[Dan-From-Ryviu]

If that app has option to show all images maybe I can help you

[basically]

It’s not an App it’s actually a metafield color variant and changed the images Alt text similar to the variant which allowed it to show only selected images as per selected variant.

I can remove the Alt text from all the images if you want, does that help… thus shows all the images regardless which variant is selected.

[Dan-From-Ryviu]

Yes, please try to do that.

[basically]

All products are shown now. Please check

[Dan-From-Ryviu]

Let me check

[Dan-From-Ryviu]

Please add this code at the bottom of your base.css file

@media screen and (max-width: 749px) {
.slider-button { display: none !important; }
.thumbnail-list__item.slider__slide {
justify-content: center;
}
.thumbnail-list__item.slider__slide .thumbnail { 
background: #ddd !important; 
border-radius: 50% !important;
}
.thumbnail-list__item.slider__slide .thumbnail img { opacity: 0 !important; }
.thumbnail-list__item.slider__slide .thumbnail[aria-current] {
background: #000 !important;
border: unset !important;
}
}

[basically]

Kinda worked! Now where can i adjust the dot circle size?

[Dan-From-Ryviu]

Sorry, missing that code. Please update to this one

@media screen and (max-width: 749px) {
.slider-button { display: none !important; }
.thumbnail-list__item.slider__slide {
justify-content: center;
}
.thumbnail-list__item.slider__slide .thumbnail { 
background: #ddd !important; 
border-radius: 50% !important;
width: 16px !important;
height: 16px !important;
}
.thumbnail-list__item.slider__slide .thumbnail img { opacity: 0 !important; }
.thumbnail-list__item.slider__slide .thumbnail[aria-current] {
background: #000 !important;
border: unset !important;
}
}

[basically]

Padding between dots seems too much, other all are fine

[Dan-From-Ryviu]

Please update code to this

@media screen and (max-width: 749px) {
.slider-button { display: none !important; }
.thumbnail-slider .thumbnail-list.slider {
justify-content: center;
width: 16px !important;
height: 16px !important;
}
.product__media-list .product__media-item { width: 100% !important; }
.thumbnail-list__item.slider__slide .thumbnail { 
background: #ddd !important; 
border-radius: 50% !important;
}
.thumbnail-list__item.slider__slide .thumbnail img { opacity: 0 !important; }
.thumbnail-list__item.slider__slide .thumbnail[aria-current] {
background: #000 !important;
border: unset !important;
}
}

[basically]

It didn’t became dotted but it turns out to be awesome!!

Now the issues are the black indicator only shows up after 4 slides, and for all the slides in between 1st and last product slide the white border comes.

Please check the reference website below which exactly we want.

[Dan-From-Ryviu]

I cannot see that border on my side

[basically]

Hm…the black dot only appears from 4th product slider onwards