Solved

how to remove the arrows and play button but keep the dots

Lamyglam
Excursionist
17 0 3

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.

Accepted Solutions (3)

KabirDev
Shopify Partner
244 60 67

This is an accepted solution.

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;
}

 

If my answer helps, please give it a Like and Accept as Solution.
- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
- You can join in our Facebook group for Shopify help.

View solution in original post

Made4uo-Ribe
Shopify Partner
5457 1314 1615

This is an accepted solution.

Hi @Lamyglam 

Do you mean like this? 

Made4uoRibe_0-1702927970230.png

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 </body> tag and paste the code below before the tag. 

 

<style>
button.slideshow__autoplay, .slider-button {
    display: none !important;
}
@media screen and (min-width: 750px) {
.slider-counter .slider-counter__link--dots .dot {
    background-color: transparent !important;
}
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    border: none !important;
}
</style>

 

And Save. 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

KabirDev
Shopify Partner
244 60 67

This is an accepted solution.

Sure, add the code below.

.slideshow__controls {
    border: 0 !important;
}
If my answer helps, please give it a Like and Accept as Solution.
- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
- You can join in our Facebook group for Shopify help.

View solution in original post

Replies 6 (6)

KabirDev
Shopify Partner
244 60 67

This is an accepted solution.

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;
}

 

If my answer helps, please give it a Like and Accept as Solution.
- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
- You can join in our Facebook group for Shopify help.
Lamyglam
Excursionist
17 0 3

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?

Scherm­afbeelding 2023-12-18 om 21.41.06.png

KabirDev
Shopify Partner
244 60 67

This is an accepted solution.

Sure, add the code below.

.slideshow__controls {
    border: 0 !important;
}
If my answer helps, please give it a Like and Accept as Solution.
- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
- You can join in our Facebook group for Shopify help.
Lamyglam
Excursionist
17 0 3

perfect thank you so much

Made4uo-Ribe
Shopify Partner
5457 1314 1615

This is an accepted solution.

Hi @Lamyglam 

Do you mean like this? 

Made4uoRibe_0-1702927970230.png

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 </body> tag and paste the code below before the tag. 

 

<style>
button.slideshow__autoplay, .slider-button {
    display: none !important;
}
@media screen and (min-width: 750px) {
.slider-counter .slider-counter__link--dots .dot {
    background-color: transparent !important;
}
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    border: none !important;
}
</style>

 

And Save. 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Lamyglam
Excursionist
17 0 3

thank you so much!!!