Shopify’s slideshow section is a great way to showcase products, promotions, or brand visuals. However, some store owners may want a cleaner look by removing the slideshow controls, such as navigation arrows and dot indicators (pagination).
Shopify’s free themes don’t provide an option to disable these controls in the Theme Editor, but you can easily hide them with CSS.
1. Add Custom CSS To Your Slideshow
Access your slideshow settings inside your Shopify Theme Editor. Make sure they’re the slideshow settings and not one of its slide options. Scroll to the bottom of the settings and locate the Custom CSS field.
Add the following code:
slideshow-component .slideshow__controls {
display: none;
}2. Bonus Tip: Hide Only Some Elements In Shopify Slideshow
The previous code is perfect to hide the whole control bar. But if you prefer to hide only some of its elements, you’ll need to adjust the CSS code to your preferences. Here are different options you can use:
.slider-button { /* hides the arrows in all pagination styles */
display: none;
}
.slider-counter { /* hides the numbers in the Counter pagination style */
display: none;
}
.slider-counter__link--numbers { /* hides the numbers in the Numbers pagination style */
display: none;
}
.slider-counter__link--dots .dot { /* hides the dots in the Dots pagination style */
display: none;
}3. Save And Test
Once satisfied with the result, save your theme changes and the desired slideshow controls should disappear immediately.
That’s it! Now you’ll achieve a more streamlined slideshow without unnecessary navigation elements!
Need personalized Shopify help? Feel free to send a message!