How to make all the filter section and sort section completely transform to uppercase and sticky
Topic summary
Goal: Convert collection page filter and sort UI text to uppercase (and make the controls sticky).
What was tried:
- Multiple replies advised editing theme code: Online Store > Themes > Edit code > Assets > base.css.
- CSS added to apply text-transform: uppercase to filter/sort elements, including selectors such as .mobile-facets__open-label, .facet-filters__sort, .facet-filters__field, .select__select, and product count text.
- Screenshots were provided showing the uppercase result.
Outcome:
- Uppercasing works as confirmed by the requester.
Current issues / open items:
- Changing the font size does not affect the sort control; the requester reports only the sort section ignores the size change. No fix posted yet (may require a more specific selector or override, but not addressed in the thread).
- The “sticky” requirement mentioned initially was not covered by the provided solutions.
Status: Partially resolved (uppercase achieved). Font-size for sort and sticky behavior remain unresolved/awaiting further guidance.
1 Like
Hello @Sivadarshan
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
span.mobile-facets__open-label.button-label.small-hide {
text-transform: uppercase;
}
.facet-filters__sort {
text-transform: uppercase;
}
.facet-filters__field {
text-transform: uppercase;
}
h2.product-count__text.text-body {
text-transform: uppercase;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hello @Sivadarshan
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.mobile-facets__open-label {
text-transform: uppercase;
}
.facet-filters__field {
text-transform: uppercase;
}
.facet-filters__field .select__select, .mobile-facets__sort .select__select {
text-transform: uppercase;
}
span#ProductCount {
text-transform: uppercase;
}
Hello @Sivadarshan , Try this
span.mobile-facets__open-label.button-label.small-hide,
.facet-filters__sort,
.facet-filters__field,
h2.product-count__text.text-body {
text-transform: uppercase;
}
