What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Change Pagination Style (Dawn Theme)

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
10340 2052 2135

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 Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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
10340 2052 2135

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 Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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
9179 2190 2706

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.