Product Titles Break Line

Varun_Jain1
Tourist
8 0 1

Hi there,

In order to create a  break line in the product title I added a  <br> tag. This worked for the product titles, but the issue is that it pops up on the cart page. The cart page now has a <br> tag on it. 

How can I achieve a break line in the product title without having any HTML visibile to the customer.

Is there any specific code I can add in a liquid file to achieve this?

0 Likes
PaulNewton
Shopify Partner
2588 134 444

ine in the product title I added a  <br> tag

If you literally put  <br> into your static product titles via the product admin, undo that. That is the improper way to handle this, the number of issues this creates is to high. Edit your themes to gracefully handle long names OR name things better.

But your storefront is locked and theme name isn't given, so others can't diagnose.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Varun_Jain1
Tourist
8 0 1

Theme name: Symmetry

https://devnaagri.myshopify.com/

password: auyier

Please suggest a way to do this in the theme. Thanks !

0 Likes
PaulNewton
Shopify Partner
2588 134 444

 i'm using this product link for reference if there's a better one provide the url.

There are multiple issues going on,

Is this because your trying to control where line breaks occur within long titles?

This is an information problem your trying to cram too much into product titles while also ignoring urls but expecting somesort of control over layout per product and having inconsistent title conventions. Does that sound about right?

Okay so first you need to address url handles naming:

https://devnaagri.myshopify.com/products/copy-of-copy-of-copy-of-a-323-yellow  is "PEACH GOTA PATTI EMBROIDERED MOTIFS KURTA AND PALAZZO PANTS" but you want to get to somehwhere like: https://devnaagri.myshopify.com/products/kurta-and-palazzo-pants or https://devnaagri.myshopify.com/products/peach-gota-patti-kurta-and-palazzo-pants

You can edit a products url by using the SEO section of a products admin

A higher level issue is putting a lot of info in the products main title:

  • peach is a color
  • gota patti embroidered is the pattern(motif)

These could be extracted to be tags, or variant options to make product titles simpler(user friendly and typeable) . This is a business choice though and should be thought through.

 

A possible solution is in your product.liquid and cart.liquid find the area that outputs the product title and use a split filter on it:

{{ product.title | replace_first:"embroidered","embroidered<br>" }}

This is so your ACTUAL product titles[1] are clean and how they are displayed are kept seperate. This doesn't address long titles that DO NOT have the keyword embroidered in them, but the logic can be the same for 'with', 'kurta' ,etc.

 

 

Advanced users note this is the same tactic if you want to style certain words differently by wrapping them in a special tag[2]:

{{ product.title | replace_first:"embroidered","<span class='embroidered'>embroidered</span>" }}

[1]In cart.liquid it would be item.title

[2] beware apostrophe and quote mark nesting issues

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Varun_Jain1
Tourist
8 0 1

You could use the following product for now: https://devnaagri.myshopify.com/collections/all/products/copy-of-a-360-peach

Thanks for your response Paul. In terms of the URL length yes we need the titles this long as this very standard in the indian fashion wear industry.

For the SEO specific URL, we will be cleaning them at the end I already have that in mind.

The update to a particular word, for example 'embroidery' in the case you explained is very specific. These words will differ for every product so I wont be able to use the method advised.

Is there any way I could remove the <br> from the cart. Any code that removes '<br>' as a string maybe as soon as it looks at it in  cart.liquid.

Hope my issue is clearer.

0 Likes
PaulNewton
Shopify Partner
2588 134 444

At minimum reverse this tactic, use a simple character (~,_., etc) and use that to insert a <br> with the liquid replace filter keeping in mind handles. Note never use '@','#','&','?','/',or '\',or '|'  in data that becomes a url.

{{ product.title | replace_first:"~","<br>" }}

/Warnings 

we need the titles this long as this very standard in the indian fashion wear industry. 

Be careful and don't confuse standard with good or ideal. Bad practices are still bad no matter how many people do them. There is a vast difference between what's useful for manufacturing and how users behave( and search).

Is there any way I could remove the <br> from the cart.

Yes, but the point is being missed this is putting presentational code <br> to be used as logic into product data. Creating an intrinsic problem instead of working out a proper solution. This will crop up in the api,your orders, notifications, etc a constant problem to be bandaged because it seemed quick.

As your offerings increase, you are better off structuring your product titles to be compositional with simple handles and tags this makes your data more flexible for things like filtering collections or by products, remember while you know your products customers don't and they're who matter.

/End Warnings

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
azitaclark
New Member
1 0 0

Where would you put this code? In place of 

"name": {{ product.title | json }}, under the product.liquid code or elsewhere?

 

Trying to make the designer differentiated from the product name. Any recommendations?

0 Likes