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 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.
@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 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.
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024