Solved

Dawn theme | slider-button

ChicBotique1
Excursionist
31 0 3

Hello everyone,

 

i was able to the change the featured collection from this :

new2.PNG

 

to this :

new.PNG

 

via this code:

<style>
    .caption {
        display: none !important;
    }

    .slider-button .icon {
        height: 2rem !important; /* Increase the height */
        width: 2rem !important; /* Increase the width */
        background: black;
        border-radius: 50%; /* Make it a circle */
        margin: auto;
        color: white;
        transform: rotate(+90deg);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid black; /* Increased border thickness */
    }
</style>

how can i fix the arrows direction ? i think it got messed up because i have set my page to RTL ? anyone can help ?

 

preview link :

https://m5gg7bgsdp7sc19q-68695785713.shopifypreview.com

 

website link:

Https://ChicBotique.co.il

 

Thanks in advance

Accepted Solution (1)

Vinsinfo
Shopify Partner
271 100 94

This is an accepted solution.

@ChicBotique1 If you are looking to display the arrows direction like in the below image. Please follow the steps mentioned below. Let me know whether it is helpful for you.
Vinsinfo_0-1712235143419.png

 

1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Locate "component-slider.css" file and paste the below code in that file like the below attached screenshot.

 

slider-component .slider-button--prev .icon {
    transform: rotate(270deg) !important;
}
slider-component .slider-button--next .icon {
    transform: rotate(90deg) !important;
}

 

Vinsinfo_0-1712235981240.png

 

If you are not looking for this solution, please share you exact need to help you with this.
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 2 (2)

Vinsinfo
Shopify Partner
271 100 94

This is an accepted solution.

@ChicBotique1 If you are looking to display the arrows direction like in the below image. Please follow the steps mentioned below. Let me know whether it is helpful for you.
Vinsinfo_0-1712235143419.png

 

1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Locate "component-slider.css" file and paste the below code in that file like the below attached screenshot.

 

slider-component .slider-button--prev .icon {
    transform: rotate(270deg) !important;
}
slider-component .slider-button--next .icon {
    transform: rotate(90deg) !important;
}

 

Vinsinfo_0-1712235981240.png

 

If you are not looking for this solution, please share you exact need to help you with this.
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
ChicBotique1
Excursionist
31 0 3

works like a charm brother