←InboxTheme development, Module 1, lesson 8, 6 min
Truncate long product titles on cards
How this works
Long titles spill over and break the grid. Cut them in Liquid with truncate. It takes a character count and adds ... by default. Pass a second argument to change that trailing string.
{{ title | truncate: 40 }} {# cuts at 40 chars, adds ... #}
{{ title | truncate: 40, "…" }} {# uses … instead #}
Why this matters in production▾
Every product card layout has a fixed width. Some merchants write 80-character titles. Either the design breaks or you truncate. This filter ends up on every collection page in every store you'll ever ship.