How can I remove slider numbers and arrows from my mobile site?

Store Design

Topic summary

A user seeks to remove slider navigation elements (numbers and arrows) from their mobile site.

Proposed Solutions:

Multiple respondents suggest adding custom CSS code to hide these elements:

  • Navigate to Online Store > Themes > Customize
  • Select the specific slider section/block
  • Locate the Custom CSS field (typically at bottom of settings)
  • Add the following code:
.slider-buttons { display: none; }

or with added specificity:

.slider-buttons { display: none !important; }

One response also mentions editing the theme code directly via Edit Code option.

Status: Multiple solutions provided using CSS to hide slider controls; awaiting confirmation from original poster on whether issue is resolved.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I would like to remove the slider numbers and arrows from my mobile website

url: https://thesnoozy.com/

Screenshot 2023-11-05 150240.png
Screenshot 2023-11-05 150240.png366×257 46.1 KB

2

Hey George,

Within your ‘customize theme’ settings, for the specific block/section you’re working with, look for the “Custom CSS” section (at the bottom of the settings):

custom css.png
custom css.png308×359 17.6 KB

And then add the following coding:

.slider-buttons {display: none;}

Cheers,

Stephen

1 Like
3

Go to your Online store > Themes > Customize > select that section, add this code below in Custom CSS of that section

.slider-buttons { display: none !important }
4

Hi @GeorgeRizos ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Remove Slider Number And Arrows, let’s try this solution:

Online Store ->Theme ->Edit code->theme.liquid

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly