How to make these button labels in collection all caps

Store Design
, ,

Topic summary

A user seeks to make button labels on a collection page display in all caps.

Solutions Provided:

Two community members offer CSS-based solutions:

  • Basic uppercase transformation: Add text-transform: uppercase !important; to the .quick-add-button class in Custom CSS
  • Font size adjustment: Extend the CSS with font-size: 1.5rem; (adjustable value) to control button text size
  • Alternative implementation: Another responder suggests adding the CSS code to theme.liquid file above the </head> tag

Status: The original poster confirms the solution works and successfully requests additional font size customization, which is promptly provided. The issue appears resolved with working code examples.

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

Image 23-01-2024 at 14.09.jpeg
Image 23-01-2024 at 14.09.jpeg890×280 22.3 KB

2

Hey @EthanOSHOP ,

Add this to the Custom CSS

.quick-add button {
    text-transform: uppercase !important;
}
3

Thank you

how do I change the font size as well?

4

Hi @EthanOSHOP

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

5

You can add this CSS to change font size, change the value to fit what you like. I just put it at 1.5

.quick-add button {
    text-transform: uppercase !important;
    font-size: 1.5rem;
}