How to change add to cart button to CAPS in collections, Dawn theme

Topic summary

A user is trying to convert “Add to Cart” buttons to uppercase on collection pages in the Dawn theme, but their CSS code isn’t working.

Solution Provided:
Instead of CSS, modify the card-product.liquid file by adding the | upcase Liquid filter to button text strings. For example:

  • {{ 'products.product.add_to_cart' | t | upcase }}
  • {{ 'products.product.sold_out' | t | upcase }}
  • {{ 'products.product.choose_options' | t | upcase }}

File Location:
The card-product.liquid file is located in the snippets folder of the theme.

Status:
The original poster is asking follow-up questions about locating the file, while multiple community members offered to provide direct assistance if given store URL access.

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

Hey, I’ve used the below code but it hasn’t changed the buttons in my collections. How do I change those?

.product-form__buttons button {
text-transform: uppercase;
}

Thanks

1 Like

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Hey @ac80

Can you share your Store URL and Password if enabled?

Best Regards,

Moeed

In card-product.liquid you can add the | upcase filter to the relevant button text to display in all capitals, please see example below.

{%- if card_product.selected_or_first_available_variant.available -%}
  {{ 'products.product.add_to_cart' | t | upcase}}
{%- else -%}
  {{ 'products.product.sold_out' | t | upcase}}
{%- endif -%}

Further up the page you will also see {{ ‘products.product.choose_options’ | t }} you can append that too with | upcase

Hope this helps

Simon

Hello @ac80 ,

Please share your store URL so that I can check it from my end.

Thanks! Do I find this under the theme.liquid?

Thanks Simon. Where do I find the card-product.liquid? What’s the heading/section it sits in?

You should find it in the snippets folder.