I have seen many other code examples how I can add it in the base.css, unfortunately it did not work.
How do I remove these?
Topic summary
Main issue: Remove the navigation arrows under a collection (slider) in the Shopify Refresh theme. The user’s attempt to edit base.css did not work.
Context: No store URL was provided; the theme is Refresh.
Proposed solutions:
- Add Custom CSS in Theme Customize to hide slider controls (e.g., targeting slider button elements to display: none).
- Add CSS in theme.liquid before to hide button.slider-button.
- Disable the setting in the section: Home page > Featured collection > uncheck “Enable swipe on mobile.”
Outcome: Unchecking “Enable swipe on mobile” removed the arrows; the original poster confirmed it worked.
Status: Resolved. No further action needed.
Hello @viccre
Can you share store URL?
My computer is having trouble inserting the link… This is the Refresh Theme. Sorry about that!
1 Like
Hi @viccre ,
Please go to your Online Store > Themes > Customize and add this code to the Custom CSS of that section.
.slider-buttons { display: none; }
Best Regards,
Dan from Ryviu
1 Like
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi @viccre
- In your Shopify Admin, go to Online Store > Themes > Customize.
- Select Home page > Featured collection, and uncheck "Enable swipe on mobile.
Screenshot: https://prnt.sc/yI_W4KTd6TyP
That worked. Thank you!