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

Solved

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

Wooow1481
Tourist
9 1 2

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

Wooow1481_0-1704145397452.png

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

 

Accepted Solution (1)

Wooow1481
Tourist
9 1 2

This is an 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




View solution in original post

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
9885 2354 2953

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:

Made4uoRibe_0-1704152073767.png

 

After:

Made4uoRibe_1-1704152094618.png

 

 

I hope it help.

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Wooow1481
Tourist
9 1 2

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
Tourist
9 1 2

This is an 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
Tourist
9 1 2

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