Dawn theme | slider-button

Store Design
,

Topic summary

A user successfully customized their Dawn theme’s featured collection slider buttons, transforming the default design into circular black buttons with white arrows. However, the arrow directions became reversed after setting the page to RTL (right-to-left) layout.

Solution Provided:

  • Navigate to Online Store → Themes → Edit code
  • Locate the component-slider.css file
  • Add CSS transforms to correct arrow rotation:
    • Previous button: transform: rotate(270deg)
    • Next button: transform: rotate(90deg)

Outcome:
The solution was confirmed to work perfectly, resolving the RTL arrow direction issue. The discussion includes before/after images and code snippets demonstrating both the initial customization and the fix.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
2

@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
Vinsinfo_0-1712235143419.png1365×681 172 KB

  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
Vinsinfo_0-1712235981240.png1024×451 20.9 KB

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.

1 Like