Remove arrows and counters from showing on a slideshow

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.
Summarized with AI on December 15. AI used: gpt-5.

Hi @Hafez_Attire

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: