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

Store Design
, ,

Topic summary

A user wants to truncate product titles on the homepage only, while keeping full titles on product pages in the Debut theme.

Initial Problem:

  • Product titles are too long on the homepage (e.g., “Organic Dual Extract Lion’s Mane Supplement Capsules | 90 Count | 1540mg Dual Extracted | Memory and Focus”)
  • Goal: Shorten to just the first part before the pipe character (“|”) on homepage only

Attempted Solutions:

  1. First suggestion involved adding CSS to theme.liquid file using template conditional ({% if template == 'index' %}), but this didn’t work
  2. Working solution: User found success by editing the product-card-grid.liquid file with Liquid code that splits the title at the pipe character and displays only the first part

Final Implementation:

  • Code uses split: "|" to break title into parts
  • Displays truncated version (first part only) when pipe character is present
  • Falls back to full title if no pipe exists
  • Applied specifically to homepage product cards

The issue appears resolved with the custom Liquid code approach.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
2

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 tag and paste the code below before the tag.

{% if template == 'index' %}

{% endif %}

And Save,

Result:

Before:

Made4uoRibe_0-1704152073767.png
Made4uoRibe_0-1704152073767.png1291×745 111 KB

After:

Made4uoRibe_1-1704152094618.png
Made4uoRibe_1-1704152094618.png1203×570 165 KB

I hope it help.

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