How can I modify the pagination style on Dawn theme for mobile devices?

Store Design
, , ,
6

bout a year late to party, just go into online store - customize - product page - click “show thumbnails”, mobile layout.

then add this to the bottom of your base.css in assets/theme for dawn. no reason to “hire an expert” in 2024 and pay for this, 2 GPT prompts and some half written community code fixed up a really simple solution, for getting pagination style changed on product images.

@media screen and (max-width: 749px) {
.slider-button {
display: none !important;
}

.thumbnail-list__item.slider__slide {
display: flex;
justify-content: center;
position: relative; /* Set container position to relative /
left: 100px; / Adjusted left position */
width: 10px !important;
height: 8px !important;
}

.thumbnail-list__item.slider__slide .thumbnail {
background: #ddd !important;
border-radius: 50% !important;
width: 8px !important;
height: 8px !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;
}
}

Turns all your thumbnails into dots.. Might need to adjust “left: 100px” pixels for correct positioning for your store, and play around with it, but it works perfect.. Fiverr devs gonna be scrubbing toilets at McDonalds soon. Seen like 8 people with this same issue in last few months, hopefully they stumble upon this. :skull:

code is probably “not great” but it works for the intended purpose.