please help!! remove arrows from slide show

Store Design

Topic summary

A user working with Shopify’s Debut theme wants to remove navigation arrows and dots from their slideshow, and make the slideshow images clickable to direct customers to specific collections.

Solution Provided:

  • To hide slideshow controls (arrows and dots), add CSS code to theme.css:
    .slideshow__controls, .slideshow__text-wrap--mobile{
visibility: hidden;
}
  • Making slideshows clickable requires substantial custom code editing, with a tutorial link provided for guidance.

Outstanding Issue:

  • The CSS solution works on desktop but not mobile for another user using the Studio theme, indicating the fix may need mobile-specific adjustments or theme-dependent modifications.
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I am using the Debut theme. I am hoping I could get rid of those little dots and arrows below the slide show

I would also like to make the banners clickable that take customer to the proper collection!

URL is www.collectivethreadco.com

Thank you!

2

To remove the slideshow controls, add this code to the bottom of theme.css

.slideshow__controls, .slideshow__text-wrap--mobile{
visibility: hidden;
}

To make the slideshow clickable, it requires substantial custom code editing. Explanation in this topic:
https://community.shopify.com/c/Shopify-Design/Tutorial-Making-Your-Slideshow-Clickable/m-p/904650/thread-id/227611

1 Like
3

Hi, this worked for me on desktop but not on mobile. Any suggestions? I’m using the studio theme.

Thanks!

www.assifassefi.com