Add this css on your theme.css or base css file at the end of thie fle
.slideshow__controls.slideshow__controls--top.slider-buttons {
display: none !important;
}
Result:
Topic summary
Goal: Remove the slideshow’s navigation UI (arrows and counter/controls) on both desktop and mobile for a Shopify theme.
What was tried/proposed:
- Add a CSS rule in the theme’s CSS (base.css/style.css/theme.css) to hide the slideshow controls: the selector targeting the top controls group (slideshow__controls.slideshow__controls–top.slider-buttons) set to display:none with !important.
- Alternative CSS targeting specific buttons: hide next/prev buttons via button.slider-button.slider-button–next and --prev set to display:none. Either in the main CSS file or theme.liquid.
- Navigation path provided: Online Store → Themes → Actions → Edit code → Assets → CSS file, then append the rule at the end.
Notes:
- Screenshots were used to indicate the elements to remove and to confirm results; they are central to understanding the change.
- One reply showed a selector with an extra space before “–top” that may be a typo; the primary solution was consistent across replies.
Outcome:
- The change worked; the original poster confirmed success. Issue resolved, no further open questions.
