Re: Capitalize "current_tags" in title

Solved

How can I capitalize all words in 'current_tags' for my Dawnsite theme title?

earthtoplanet
Explorer
46 6 8

Theme: Dawn

site: www.earthtoplanet.com

 

On my default collection page I've put in some dynamic content that reflects the filter value (in this case, the product tag). For example, this page shows products with the tag "whale jump":

 

https://earthtoplanet.com/collections/all/whale-jump

 

For the H1 title, I'm using the following to try and capitalize the words:

{{ current_tags | join: '' | capitalize }}

 

However, that only capitalizes the first word (i.e., the "W" in whale) instead of both words: Whale Jump cartoon:

earthtoplanet_0-1646445427765.png

I believe because the current_tags value is an array and not a string? I'm such an amateur that I have no idea how to convert that array into a string of if there's a simpler way for the title to show as Whale Jump cartoon (with both a capital W and a capital J).

 

Thank you for your help!

Accepted Solution (1)
suyash1
Shopify Partner
9559 1195 1536

This is an accepted solution.

@earthtoplanet - please add this CSS to the very end of base.css file

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
9559 1195 1536

@earthtoplanet - using this css it can be like screenshot below

.collection-hero__title{text-transform: capitalize;}

 

suyash1_0-1646456585913.png

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
earthtoplanet
Explorer
46 6 8

Thanks for your help @suyash1

Where do I input that CSS? For example, the full custom liquid I'm using on this page looks like this:

 

<div class="collection-hero">
<div class="collection-hero__inner page-width">
<div class="collection-hero__text-wrapper">

{% if current_tags.size > 0 %}

{% if collection.products_count > 1 %}

<h1 class="collection-hero__title">
{{ current_tags | join: '' | capitalize }} Cartoons
</h1>

<div class="collection-hero__description rte">

Ask for comics about {{ current_tags }}, and {{ current_tags }}{{"-related"}} comics you shall receive. I found {{ collection.products_count }} you can check out:
</div>

{% else %}

<h1 class="collection-hero__title">

{{ current_tags | join: '' | capitalize }} cartoon
</h1>

<div class="collection-hero__description rte">

Good news, my friend. I found one  {{ current_tags }}{{"-related"}} comic:
</div>

{% endif %}

{% else %}

<h1 class="collection-hero__title">
  {{ collection.title }}
</h1>
{% endif %}

</div>
</div>
</div>
suyash1
Shopify Partner
9559 1195 1536

This is an accepted solution.

@earthtoplanet - please add this CSS to the very end of base.css file

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
earthtoplanet
Explorer
46 6 8

That worked. Thanks, @suyash1 !

earthtoplanet
Explorer
46 6 8

Hey @suyash1, I'll throw a related question your way since you're so knowledgeable about this stuff.

 

I'm using the same current_tags variable to dynamically set my HTML title and Meta Description for SEO purposes. I'm currently having the same issue where product tags with two words are only capitalizing the first word. 

 

Here's an example for the collection filtered for the product tag advanced technology https://earthtoplanet.com/collections/all/advanced-technology 

 

Looking at the current HTML of the page, I'm hoping to get "technology" capitalized, as well:

 

 

<title>Advanced technology Cartoons &amp; Products | Earth To Planet Comics</title> 
    
<meta name="description" content="Advanced technology Cartoons &amp; Products by Earth To Planet Comics. Buy prints, digital licenses, and good times from an independent cartoonist.">

 

 

I don't believe I can use CSS to capitalize the HTML Title and Meta Description. Here's the code I'm using in my theme.liquid file. Thanks for your insight!

 

 

 

{% if template contains 'collection' %}
    {% if current_tags.size > 0 %}
    	<title>{{ current_tags | join: '' | capitalize }} {{ page_title }} | Earth To Planet Comics</title> 
    {% else %}
    	<title>{{ page_title | append: " | Earth To Planet Comics" | escape }}</title>
    {% endif %}
    
{% elsif template contains 'product' %}
    	<title>{{ product.title | append: " | Earth To Planet Comics" | strip_html | escape }}</title>
{% else %}
    	<title>{{ page_title | append: " | Earth To Planet Comics" | escape }}</title>
{% endif %} 
    
{% if template contains 'collection' %}
    {% if current_tags.size > 0 %}
      <meta name="description" content="{{ current_tags | join: '' | capitalize }} {{ page_title }} by Earth To Planet Comics. Buy prints, digital licenses, and good times from an independent cartoonist.">    
	{% else %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %} 
    
{% elsif template contains 'product' %}
      <meta name="description" content="This Earth To Planet cartoon is appropriately titled, {{ product.title | escape }}. Some will see it and laugh, others will become stark raving mad.">
{% else %}
      <meta name="description" content="{{ page_description | escape }}">
{% endif %}  

 

 

suyash1
Shopify Partner
9559 1195 1536

@earthtoplanet - I checked on browser and I can see that title is capitalized, please check title name I believe j in jump is smaller in title, please check 

 

suyash1_0-1646585543986.png

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
earthtoplanet
Explorer
46 6 8

You're correct that the second word in the product tag is not capitalized and that's what I'm hoping to fix for the HTML Title and Meta Description. Is there a way to force capitalize each word even if the original current_tags value is not capitalized?

suyash1
Shopify Partner
9559 1195 1536

@earthtoplanet - unfortunately it can not be forced, CSS can be set for the page content but on title it do not work, you will need to manually edit titles of the products

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
earthtoplanet
Explorer
46 6 8

Bummer. Thank you for looking into it for me.