how to remove slide number from the collections
Topic summary
A user seeks to remove slide numbers from their Shopify collection pages.
Solutions Provided:
Multiple community members offered CSS-based solutions:
-
Primary method: Add
.slider-counter { display: none !important; }to the theme’s CSS file (base.css or theme.css) -
Alternative approach: Insert the CSS code wrapped in
<style>tags before the</body>tag in theme.liquid file -
One response included a mobile-specific media query targeting screens under 767px width
Implementation Steps:
- Navigate to Online Store → Theme → Edit code
- Locate either the CSS file or theme.liquid file
- Add the provided code snippet
- Save changes
Screenshots were shared demonstrating the code placement and expected results. The original poster confirmed the solution worked with a brief thank you message.
1 Like
Hi @jitesh1 , I hope you are doing great, just put the below code in your theme.css or base.css file:
.slider-counter {
display: none !important;
}
or
Step 1. Go to Online Store → Theme → Edit code.
Step 2. Open your theme.liquid file
Step 3. In theme.liquid, paste the below code before
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Hello @jitesh1
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
1 Like
- Here is the solution for you @jitesh1
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
.slider-counter {
display: none !important;
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
thank you
1 Like