Thanks for your help, I tried it and it doesn’t seem to be working..
Topic summary
Goal: Hide the slideshow navigation (arrows and pause) in the Shopify Refresh theme where slides auto-advance.
What was tried:
- Add custom CSS to either base.css (recommended at the bottom) or component-slideshow.css.
- Correct selector: use “.slideshow__controls” (with two underscores). The initial “.slideshow_controls” (one underscore) did not work.
- Suggested rule: .slideshow__controls { display: none !important; } — “!important” may be needed depending on stylesheet load order.
Outcome:
- After correcting the selector to two underscores, the controls were successfully hidden on the provided site (eclatled.com). The original poster confirmed it worked.
Open point:
- Another participant reported it still not working and asked which file to place the code in. Earlier guidance indicated either base.css (preferred at the bottom for overrides) or component-slideshow.css. No final follow-up from that participant.
Notes:
- CSS (Cascading Style Sheets) controls visual styling; the change simply hides the control elements from display.
1 Like