Studio Theme: Change Slideshow Controls

PPUSA
Excursionist
36 0 11

Hey @KetanKumar 

 

Do you know the code to change the slideshow controls on the Studio Theme from controls beneath the slideshow to large arrows like: < slideshow image > at either end of the image.

 

Example screenshot attached.

 

Thank you...you're awesome!

 

 

 

 

Replies 9 (9)

KetanKumar
Shopify Partner
36839 3635 11972

@PPUSA 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PPUSA
Excursionist
36 0 11

Thank you, the site is zeldaandharley.com

KetanKumar
Shopify Partner
36839 3635 11972

@PPUSA 

thanks bt i can't see your example attachment 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PPUSA
Excursionist
36 0 11

Screen Shot 2022-04-06 at 2.01.47 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@PPUSA 

can you please confirm this look?

KetanKumar_0-1649272443161.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PPUSA
Excursionist
36 0 11

Yes, that looks good!

 

Thanks for your help with this

KetanKumar
Shopify Partner
36839 3635 11972

@PPUSA 

thanks for confirm can you please add  this code

1. Go to Online Store->Theme->Edit code
2. Asset->/component-slider.css ->paste below code at the bottom of the file.

.slideshow__autoplay.slider-button {
    display: none;
}
.slider-counter.slider-counter--dots {
    display: none;
}
.slider-buttons {
    border: none;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.slider-button {
    width: 80px;
    height: 80px;
}
.slider-button .icon {
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 749px) {
.slider-button .icon {
    width: 50%;
    height: 50%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PPUSA
Excursionist
36 0 11

Thanks @KetanKumar 

The arrows are presenting but don't work when clicked.

Also, if it possible to make them this color: #9B6FA5.

 

Let me know if there's a way to solve for these,

 

Thank you again!

PPUSA
Excursionist
36 0 11

Potentially this is happening as I changed the slideshow image to be clickable? Is there a way to do both? Progress slides by clicking on arrows and click to see the image link page by clicking anywhere else?