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

Store Design
, , ,
1

How can I change the pagination style for my product media from the original (Figure 1) to be more like the pagination style from the slide show section (Figure 2)? This only applies for mobile devices that get the pagination when on the product page.

Figure 1:

Ahsan0213_1-1681371945358.png

Figure 2:

Ahsan0213_0-1681371931187.png

2

Hi @Ahsan0213 , default Dawn theme does not supports Figure 2 stye. You will need to hire an expert to do it for you.

3

@Ahsan0213 below link might be help ful to you to do pagination style change:
https://codepen.io/chrisgannon/pen/WNgWBRp

4

As I told you, you will need to edit code of theme to change pagination style of theme. You will need to hire an expert to do it for you.

5

Hi @Ahsan0213 ,

Sorry for experiencing this problem. The solution for this is you need to hire a developer to write the specific code for you. Or you can check the video below which you can changes dots and number whatever you like and with Carousel Style.

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.