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

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

Ahsan0213
Visitor
2 0 0

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

 

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
10087 2006 2056

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Ujjaval
Shopify Partner
1242 197 213

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

Dan-From-Ryviu
Shopify Partner
10087 2006 2056

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. 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Kizingo
Visitor
1 0 0

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. 💀

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

Made4uo-Ribe
Shopify Partner
8780 2100 2575

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.