hello, my site is Lamyglam.Com. does anyone know how I can remove the arrows and play button but keep the dots? Also tried to change the dots colours to white, but they all changed white can I make it so that it shines white only if its in the shown picture. When it is not I want it to be transparent with only the outer circle.
Topic summary
Goal: In a Shopify slideshow, remove arrows and play/pause buttons, keep only navigation dots, and style dots so the active one is white while inactive ones are transparent with just an outer ring.
Solution provided: Add custom CSS to the theme’s stylesheet to hide autoplay icons and slider arrows, make default dots transparent, and set the active dot’s background to white. Implementation was suggested via the theme’s CSS file; another reply showed the desired look with an image and suggested inserting CSS before in theme.liquid.
Follow‑up: The author asked to remove the visible edges/border around the dot control area. Additional CSS was supplied to remove the border from the slideshow controls.
Outcome: The CSS changes achieved the requested behavior (icons/arrows hidden, dots styled correctly, borders removed). The author confirmed the solution worked.
Notes: Two images/screenshots were used to clarify the desired appearance and the issue with edges between dots. Status: Resolved; no outstanding questions.
1 Like
Hi @Lamyglam , add the below code to your theme’s CSS file.
.slideshow__autoplay .icon.icon-play, .slideshow__autoplay .icon.icon-pause, .slider-button {
display: none !important;
}
button.slider-counter__link.slider-counter__link--dots.link .dot {
background: transparent !important;
}
button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active .dot {
background: #fff !important;
}
1 Like
Hi @Lamyglam
Do you mean like this?
if it is, check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
thank you so much, it works!!! do you know if there is a possibility to make those edges where the dots are between them disappear?
thank you so much!!!
1 Like
Sure, add the code below.
.slideshow__controls {
border: 0 !important;
}
1 Like
perfect thank you so much
1 Like