Line break in Product Titles?

dvgulik
New Member
5 0 0

Hi there,

I've read what I can find regarding this topic in the forum to no avail.

I just created a free-trial Shopify account, using the default theme called "Debut". I created a collection of 4 products, and am using a "buy button" to display the group of products on a separate, company web page as a proof-of-concept.

All I want to do is have the ability to add line breaks into the product titles so they all display in a consistent way. Using <br> doesn't work.

Gleaned from other suggestions, I also tried adding:

{{ product.title | replace:'-','<br>' }}

into the appropriate source files as a workaround (by forcing the "-" to read as <br>) but I can't seem to get that to work either.

Any suggestions would be greatly appreciated.

Thank you.

0 Likes

are all your product title connected with '-', like Super-Cool-Cellphone?

If they are like Super Cool Cellphone, you can probably use 

{{ product.title | replace:' ','<br>' }}
Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
dvgulik
New Member
5 0 0

Thank you for your reply,

I don't have any hyphens in my product titles. I'm trying to get the titles to line break in 2 places, so each title would be three lines.

Your suggestion is very similar to one I already tried, where it would convert hyphens into <br>:  {{ product.title | replace:'-','<br>' }}

Similarly, it could be adapted to convert commas into <br>: {{ product.title | replace:',','<br>' }}

I attempted it but couldn't get it to work. I tried placing it in the "product-template.liquid" and the "product.liquid" files.  I'm assuming I may not be placing it in the correct file, or in the correct way, etc...

Are there directions on exactly where to place the code, and in which file(s) in the 'Debut' theme?

0 Likes

you should look for something in product-card-list.liquid

 

  <div class="list-view-item__title">{{ product.title }}</div>

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
dvgulik
New Member
5 0 0

I found two instances of "product.title" in  product-card-list.liquid:

<span class="visually-hidden">{{ product.title }}</span>

and

<span class="product-card__title">{{ product.title }}</span>

 

I tried replacing each one separately, and both together, and it didn't seem to make a difference...

0 Likes
dvgulik
New Member
5 0 0

As an update, I was able to get this to work for the product titles in my actual Shopify store.

However, when I use the "Buy Button" under "Sales Channels" to display a collection of products on a separate website, the line breaks do not work. Is there a way to make this work?

Thank you

0 Likes

do you have the url for the other website?

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
dvgulik
New Member
5 0 0

I DM'd you

0 Likes