This is on a product page. The attached image is the desktop view, and I want the break to look like:
“Cat Harness
and Leash Set”
Topic summary
A user wants to add line breaks to product titles on their Shopify store to control how they display across different screen sizes.
Initial Solutions Offered:
- One approach suggested adding custom JavaScript/CSS code to the theme.liquid file
- Another recommended using metafields for granular control across devices, though this requires advanced customization
Working Solution:
The most successful method involves modifying the main-product.liquid file by replacing the standard product title code with a Liquid snippet that splits the title at a specific word or character (like “and” or “~”):
{% assign title_parts = product.title | split: "and" %}
{{ title_parts[0] }}
{{ title_parts[1] }}
Follow-up Issue:
The solution works on product pages but doesn’t apply to collection displays (like “Popular Items” sections on the homepage). A user working with the Trade theme is seeking help to extend this functionality to featured-product.liquid and card-collection.liquid files.
Status: Partially resolved - works for product pages, but implementation for collection/homepage displays remains in progress.
Hey @jadedheart32
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hey @jadedheart32
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
How do I control the breaks on different media sizes. It’s breaking weird on tablet.
Hi @jadedheart32 to have consistent layout across devices/screen-sizes AND have granular control over title line breaks requires an advanced theme customization.
You need to replace the titles with metafields duplicating the title with the addition of a character/sequence that indicates where to split/break the title up.
If you just try to do it with only the title you’ll either need all titles to have a consistent word to break on, or have to add spurious characters that customers shouldn’t see or don’t make sense on some sales channels, and can still get inconsistent behavior across devices/screen-sizes.
If you need this customization then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
You can try to follow these instructions:
-
Login to Shopify admin
-
Go to Online Store > Themes
-
Find the Dawn theme and click on ‘…’ > Edit code.
-
Open main-product.liquid file, look for the code that displays the product title like this
# {{ product.title | escape }}
- Replace it with this code
#
{% assign title_parts = product.title | split: "and" %}
{{ title_parts[0] }}
{{ title_parts[1] }}
- Save your file and check again.
This works beautifully thank you!
1 Like
You are very welcome!
Can you give me some further help on this topic? This solution worked for the product pages. But, the split titles are not displaying in the “Popular Items” section on the home page. The products are assigned to a collection. I’ve tried inserting a similar code snippet in sections/featured-product.liquid and snippets/card-collection.liquid, but it didn’t work. Note that I’m using the Trade theme, and I’m using a “~” in the split. I’m just learning liquid and I clearly don’t have the code correct. Can you show me how to get the split titles to display in Popular Items?
You can try to use this code and check again
#
{% assign title_parts = product.title | split: "-" %}
{{ title_parts[0] }}
{{ title_parts[1] }}