How to change product titles from uppercase to just capitalizing the first letter?

Store Design
1

Hi all,

Just wondering if there is anyone that can help me with text-transform. I’ve looked at the liquid file, identified the text-transforms and changed it to ‘capitalize’ from uppsercase but nothing changed. Not sure if I edited the right code but those are the only text-transform I can see. I’ve looked everywhere and can’t identify. Could it be another code embedded elsewhere?

Basically, I’ve loaded my products to collection page and it’s displaying everything nicely except for title which is in caps lock.

These are the codes I edited:

#nav-tab-info .nav-tabs .nav-item {
text-transform: capitalize;
padding:0;
margin:0 5rem -2px 0;
font-weight: normal;
background-color: transparent;
font-size: 16px;
padding:5px 0;
}

or

{% if section.settings.product_vendor_enable %}

{{'products.product.vendor' | t }}: {{ product.vendor }}

{% endif %} {% if section.settings.product_type_enable %}

{{'products.product.type' | t }}: {{ product.type }}

{% endif %} {% if section.settings.variant_sku_enable %}

{{'products.product.sku' | t }}: {{ current_variant.sku | default:'null' }}

{% endif %} {% if section.settings.variant_available_enable %}

{{'products.product.available' | t }}: {% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}

{% endif %}
{% if settings.safe_checkout_detail != blank %}
{% endif %}

Appreciate if anyone can help! Thank you so much in advance.

1 Like
2

@shells

Please share your store URL.

3

Thank you. I have figured this one out myself.

4

How did you solve it ?

Thanks

5

no solution unfortunately.

6

@ergulg

There is a CSS property that capitalizes all the first letters of all words of a specific element ( text-transform: capitalize; ), but we’d need to see your website and know which text you want to to capitalize to be able to provide further assistance.

Kind regards,
Diego

7

Is the issue that the product titles were originally entered in as all capital letters? I had a similar problem and fixed it with a combination of liquid and css. Use the liquid string filter downcase and css style text-transform: capitalize. Inline it could look something like this: {{ product.title | downcase }}

1 Like
8

Actually, I think {{product.title | downcase | capitalize}} works too. - Oops, never mind. This doesn’t quite work.