Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
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!
Sorry, it did not work Im trying to get the titles to go from:
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
So this will append nothing everytime the code sees the "|" character. Really cool. Debut Theme
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025