Solved

Long product titles on my home page

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
5126 1223 1497

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


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