How to shorten product titles on homepage only in debut theme?

[Wooow1481]

Looking to shorten the product titles on my homepage but not the product page...

So I want the product titles to cut off with an eclipse on the homepage but not the product page, theme is debut

[Made4uo-Ribe]

Hi @Wooow1481 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 {% if template == 'index' %}
<style>
.grid-view-item__title {
    letter-spacing: -1px !important;
}
</style>
{% endif %}

And Save, 

Result:

Before:

After:

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Wooow1481]

Sorry, it did not work Im trying to get the titles to go from:

Organic Dual Extract Lion's Mane Supplement Capsules | 90 Count | 1450mgs Dual Extracted | Memory and Focus 

to

"Organic Dual Extract Lion's Mane Supplement Capsules..."

but only on the homepage

[Wooow1481 · Accepted solution]

Got it

{% assign title_parts = product.title | split: "|" %}

{% if title_parts.size > 1 %}
{% assign truncated_title = title_parts.first | append: '' %}
{% else %}
{% assign truncated_title = product.title %}
{% endif %}

<span style="font-size: 1.2em;">{{ truncated_title }}</span>

In the product-card grid.liquid

Thanks ChatGPT xD

[Wooow1481]

So this will append nothing everytime the code sees the "|" character. Really cool. Debut Theme