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
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.
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
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
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.