Remove slide counter on mobile swipe enabled sections | Dawn

Store Design

Topic summary

Goal: Hide the slide counter on mobile swipe-enabled sections (collections and multicolumn) in the Dawn theme.

Key proposals:

  • Add CSS per section: Using the section’s Custom CSS field, set “.slider-buttons { display: none; }”. This hides the counter for that specific section.
  • Base.css scoped rule: “.collection-list-wrapper .slider-buttons { display: none; }” worked for collections but not for multicolumn.
  • Global rule in base.css: “.slider-buttons { display: none; }” was suggested but did not work for the requester.
  • Mobile-only option: In component-slider.css, add a media query to target mobile widths: “@media (max-width: 990px) { .slider-mobile-gutter .slider-buttons { display: none; } }”. A media query applies CSS only under specified screen sizes.

Outcome: The requester confirmed the per-section Custom CSS approach worked, while adding CSS to base.css did not. They thanked contributors after successful implementation.

Notes:

  • CSS (Cascading Style Sheets) controls styling; “.slider-buttons” is the counter’s container.
  • Images were shared for illustration but not essential to the solution.

Status: Resolved with a working per-section fix; an optional mobile-only method was also provided.

Summarized with AI on January 4. AI used: gpt-5.
1

Hi, how could I remove slide counter on mobile swipe enabled sections, but it is not slides, its collections and multicolumn sections. See picture bellow

IMG_5347.jpg
IMG_5347.jpg1170×2532 210 KB

2

Hello @DaivaHappy ,

Could you please share website URL and password here?

Thanks,

Ritu

3

Hi, https://wearhappy.lt/, no password, its live already

4

You can add this code to Custom CSS of each section in Online Store > Themes > Customize to remove it

.slider-buttons { display: none; }
5

Hello @DaivaHappy ,

Please add this CSS in Base.css.

.collection-list-wrapper .slider-buttons {
    display: none;
}
6

The code worked on collections section, but on multicolumn (section bellow in my picture) you can still see the counter. Could you help me to remove that one as well?

7

I am not that advanced to be able to put code somewhere in the middle… :disappointed_face:

8

@DaivaHappy ,

Okay then for all just use this code.

.slider-buttons {
    display: none;
}
9

@DaivaHappy Please follow below steps to hide slider count on mobile view alone. Let me know whether it is helpful for you.

  1. From admin panel, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search “component-slider.css” and then paste the below code in the bottom of that file.
    CODE:
@media screen and (max-width:990px) {
  .slider-mobile-gutter .slider-buttons {
    display: none;
  }
}

For your information - You can update the pixel from 991px to any other pixel that you want to hide the slider buttons.

priyavinsinfo_0-1708595699484.png
priyavinsinfo_0-1708595699484.png440×785 119 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

10

Go to your Online Store > Themes > Customize > select section you want to hide slide counter, add code in Custom CSS

Screenshot 2024-02-22 at 16.54.51.png
Screenshot 2024-02-22 at 16.54.51.png1796×884 174 KB

11

Code did not worked whent put in base.css, but worked when put in each section custom CSS field :slightly_smiling_face:

12

thank you, perfect explanation and it worked :slightly_smiling_face: