Main issue: Convert the Shopify Dawn (v15.0.2) slideshow pagination from circular dots to bar/line indicators.
Proposed solution: Add custom CSS targeting the dot elements to reshape them into bars. Selector and properties suggested: .slider-counter__link–dots .dot { width: 43px !important; height: 4px !important; border-radius: 0 !important; }.
How to apply: Online Store > Themes > Customize > select the Slideshow section > find the Custom CSS field on the right panel > paste the CSS and adjust width/height as needed.
Notes: The width and height values can be tweaked to achieve the desired bar thickness and length. The change relies solely on CSS, no theme file edits mentioned.
Contextual aids: Two images were provided showing the current dot pagination and the desired bar-style pagination, which are central to visualizing the goal.
Status: A concrete fix was proposed, but there’s no confirmation from the original poster that it resolved the issue, so the thread outcome remains unconfirmed.
Hi all
I am using Shopify Dawn v 15.0.2 and want to change the pagination style of the image slideshow from dots to lines/bars. I have been unable to find any advice on how to do this but I know it is possible.
This is what it currently looks like:
This is what I want it to look like:
Any help would be amazing, thank you!
Hi @formjohn ,
You can edit this by adding a simple line of code in your custom css
.slider-counter__link--dots .dot {
width: 43px !important;
height: 4px !important; // adjust this as your need
border-radius: 0 !important;
}
Go to your online store > themes > current active theme > customize > click slideshow section> in rightside scroll down you can see place to add custom css> paste the above code.
I hope your issue will fix by this solution
If you need further assistance, feel free to reach out!
Regards,
Sweans