Shopify themes, liquid, logos, and UX
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:
Figure 2:
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.
@Ahsan0213 below link might be help ful to you to do pagination style change:
https://codepen.io/chrisgannon/pen/WNgWBRp
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.
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.
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.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024