How to add line break in product title?

[jadedheart32]

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"

[Moeed · Accepted solution]

Hey @jadedheart32 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__title>* {
    width: 50% !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[PaulNewton · Accepted solution]

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.

[Moeed]

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

[jadedheart32]

https://petgrove.com/products/cat-harness-and-leash-set?variant=46962798330102

[Moeed · Accepted solution]

Hey @jadedheart32 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__title>* {
    width: 50% !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[jadedheart32]

How do I control the breaks on different media sizes. It's breaking weird on tablet.

[PaulNewton · Accepted solution]

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.

[Dan-From-Ryviu · Accepted solution]

Hi @jadedheart32 

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 

<h1>{{ product.title | escape }}</h1>

• Replace it with this code 

<h1 class="product-title">
  {% assign title_parts = product.title | split: "and" %}
  {{ title_parts[0] }}<br>{{ title_parts[1] }}
</h1>​

• Save your file and check again. 

[jadedheart32]

This works beautifully thank you!

[Dan-From-Ryviu]

You are very welcome!