How can I eliminate the 1/3 display on mobile for my main page collection?

Topic summary

A user wants to remove the “1/3” pagination indicator that appears at the bottom of product collection carousels when viewed on mobile devices. They want customers to be able to swipe through products without seeing this counter.

Proposed Solutions:

Two community members offered CSS code snippets to hide the slider pagination:

  • First solution targets .slider-buttons with display: none within a mobile media query (max-width: 749px)
  • Second solution targets .slider-counter.caption with the same approach, to be added at the top of the base.css file

Current Status:

The initial CSS suggestion did not work for the user. They clarified wanting the indicator removed from all collection carousels on mobile. The discussion remains open as the user awaits a working solution.

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

hi! is it possible to remove < 1/3 > on the mobile phone. when you look at the quarter zips collection on the main page on mobile you can swipe and there is <1/3> at the bottom. i want this to be removed so you can just swipe.

Website

https://f70e0e-2.myshopify.com/

Hi @mira777

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (max-width: 749px) {

.slider-buttons {display: none;}

}

Regards,

San

hi, unfortunately it doesnt work. i want it to be removed at all collections on mobile phone where you see <…> to scroll through the products. i hope you can help me, thanks in advance

My Store (f70e0e-2.myshopify.com)

1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the Top of the file:
@media screen and (max-width: 749px) {
.slider-counter.caption {
    display: none;
}
}