Currently using symmetry theme. My product image scrolling carousel shows up as multiple images. I need some help changing it to the dots to make it look simpler. First image is what currently shows on my product page. Second image is how I’d like it to look. Would appreciate any help!
Look if your theme provides a feature to hide thumbnails as mobiles. atleast that would be a start but as far as dots are concerned i dont think any theme provides that atleast not i know of. so for that you will have to add css code in yout theme code editor.
Share your store url. Will try it if its possible to give you a solution from the inspector tool or might need collaborator access to edit code.
Thanks
Hi @davidkduong ,
Please go to Actions > Edit code > Assets > main.css file and paste this at the bottom of the file:
.thumbnails .slider__grid {
justify-content: center;
gap: 3px;
}
.thumbnails .slider__item {
width: auto !important;
}
.thumbnails .slider__item .img-ar {
width: 8px;
height: 8px;
border-radius: 100%;
overflow: hidden;
background: #808080;
}
.thumbnails .slider__item.is-active .img-ar {
background: #000000;
}
.thumbnails .slider__item .img-ar img{
display: none !important;
}
.thumbnails .slider__item .img-ar:before,
.thumbnails .thumbnail:after {
display: none !important;
}
1 Like
Hi @davidkduong ,
If you have any questions, you can contact me directly.
Nice to meet you 