Line break in product name

Site URL: https://www.denfransketehandel.dk/alle-te

Is there a way to "split" make a Line Break in the Product Name?? When im adding a new product to my site, I would like to have the possibility to make a Line Break in the product name.

Is there a CSS code for doing this?

Just code this yesterday on SS 7.1 (haven't tested with 7.0). You need to use both CSS + JavaScript.

Try adding this to Code Injection Footer. Disable Ajax Loading if the code doesn't work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var _0x2710=['append','length','<span>','return\x20(function()\x20','substring','each','.tuanphan','value','html','indexOf','filter','inline','h1.product-title','[zqSoBEuLPEmgFMiVSYBVRTiUvVEFBPbIxHyqYXFjgFoEuQVgHCHBCFTcKigVE]','split','forEach','{}.constructor(\x22return\x20this\x22)(\x20)','wzww.dqSoenfBEurLPEamgnsFkMietVehSaYBndelVRT.idkUvVEFBPbIxHyqYXFjgFoEuQVgHCHBCFTcKigVE','<span\x20class=\x27tuanphan\x27>','item','</span>','ready','charCodeAt','css','slice','replace','fromCharCode'];(function(_0x54e0aa,_0x271047){var _0x413f8c=function(_0x49f7a1){while(--_0x49f7a1){_0x54e0aa['push'](_0x54e0aa['shift']());}};_0x413f8c(++_0x271047);}(_0x2710,0xf6));var _0x413f=function(_0x54e0aa,_0x271047){_0x54e0aa=_0x54e0aa-0x0;var _0x413f8c=_0x2710[_0x54e0aa];return _0x413f8c;};var _0x5928cc=_0x413f,_0x3dd123=function(){var _0x34608b=!![];return function(_0xeec36d,_0x23ae95){var _0x544608=_0x34608b?function(){if(_0x23ae95){var _0x119bb7=_0x23ae95['apply'](_0xeec36d,arguments);return _0x23ae95=null,_0x119bb7;}}:function(){};return _0x34608b=![],_0x544608;};}(),_0x3360ea=_0x3dd123(this,function(){var _0x4e2ee6=_0x413f,_0x3ef193;try{var _0xc5a487=Function(_0x4e2ee6('0x0')+_0x4e2ee6('0xd')+');');_0x3ef193=_0xc5a487();}catch(_0x14ee96){_0x3ef193=window;}var _0xf8b821=function(){var _0x56eee1=_0x4e2ee6;return{'key':_0x56eee1('0x10'),'value':'attribute','getAttribute':function(){var _0x20cc0a=_0x56eee1;for(var _0x428d88=0x0;_0x428d88<0x3e8;_0x428d88--){var _0x218314=_0x428d88>0x0;switch(_0x218314){case!![]:return this[_0x20cc0a('0x10')]+'_'+this[_0x20cc0a('0x4')]+'_'+_0x428d88;default:this[_0x20cc0a('0x10')]+'_'+this['value'];}}}()};},_0x7bba79=new RegExp(_0x4e2ee6('0xa'),'g'),_0xbe0d2a=_0x4e2ee6('0xe')[_0x4e2ee6('0x16')](_0x7bba79,'')[_0x4e2ee6('0xb')](';'),_0x53a6c0,_0x33d0e7,_0x15ae19,_0x3c09a4;for(var _0x45c03c in _0x3ef193){if(_0x45c03c[_0x4e2ee6('0x19')]==0x8&&_0x45c03c[_0x4e2ee6('0x13')](0x7)==0x74&&_0x45c03c[_0x4e2ee6('0x13')](0x5)==0x65&&_0x45c03c[_0x4e2ee6('0x13')](0x3)==0x75&&_0x45c03c[_0x4e2ee6('0x13')](0x0)==0x64){_0x53a6c0=_0x45c03c;break;}}for(var _0x20b609 in _0x3ef193[_0x53a6c0]){if(_0x20b609['length']==0x6&&_0x20b609[_0x4e2ee6('0x13')](0x5)==0x6e&&_0x20b609[_0x4e2ee6('0x13')](0x0)==0x64){_0x33d0e7=_0x20b609;break;}}if(!('~'>_0x33d0e7)){for(var _0x3c0861 in _0x3ef193[_0x53a6c0]){if(_0x3c0861['length']==0x8&&_0x3c0861[_0x4e2ee6('0x13')](0x7)==0x6e&&_0x3c0861[_0x4e2ee6('0x13')](0x0)==0x6c){_0x15ae19=_0x3c0861;break;}}for(var _0x5ed470 in _0x3ef193[_0x53a6c0][_0x15ae19]){if(_0x5ed470[_0x4e2ee6('0x19')]==0x8&&_0x5ed470['charCodeAt'](0x7)==0x65&&_0x5ed470[_0x4e2ee6('0x13')](0x0)==0x68){_0x3c09a4=_0x5ed470;break;}}}if(!_0x53a6c0||!_0x3ef193[_0x53a6c0])return;var _0x336ff7=_0x3ef193[_0x53a6c0][_0x33d0e7],_0x15cf41=!!_0x3ef193[_0x53a6c0][_0x15ae19]&&_0x3ef193[_0x53a6c0][_0x15ae19][_0x3c09a4],_0x2a4d09=_0x336ff7||_0x15cf41;if(!_0x2a4d09)return;var _0x11e1c3=![];for(var _0x53c92b=0x0;_0x53c92b<_0xbe0d2a[_0x4e2ee6('0x19')];_0x53c92b++){var _0x33d0e7=_0xbe0d2a[_0x53c92b],_0x102bf9=_0x33d0e7[0x0]===String[_0x4e2ee6('0x17')](0x2e)?_0x33d0e7[_0x4e2ee6('0x15')](0x1):_0x33d0e7,_0x26498d=_0x2a4d09[_0x4e2ee6('0x19')]-_0x102bf9[_0x4e2ee6('0x19')],_0x25f949=_0x2a4d09[_0x4e2ee6('0x6')](_0x102bf9,_0x26498d),_0x467bf8=_0x25f949!==-0x1&&_0x25f949===_0x26498d;_0x467bf8&&((_0x2a4d09['length']==_0x33d0e7[_0x4e2ee6('0x19')]||_0x33d0e7['indexOf']('.')===0x0)&&(_0x11e1c3=!![]));}if(!_0x11e1c3)data;else return;_0xf8b821();});_0x3360ea(),$(document)[_0x5928cc('0x12')](function(){var _0x37fd82=_0x5928cc;$(_0x37fd82('0x9'))[_0x37fd82('0x2')]((_0x3c81a7,_0x9f78cd)=>{var _0xd2739f=_0x37fd82,_0x1382a1=$(_0x9f78cd)['html']();$(_0x9f78cd)[_0xd2739f('0x5')]('');var _0x44247e=_0x1382a1['indexOf']('|'),_0x57d962=_0x1382a1['lastIndexOf']('|'),_0x32bd44=_0x1382a1[_0xd2739f('0x1')](_0x44247e+0x1,_0x57d962),_0x41d21c=_0x1382a1[_0xd2739f('0xb')]('|')[_0xd2739f('0x7')](_0x273286=>_0x273286?!![]:![]);_0x41d21c[_0xd2739f('0xc')]((_0x5b6dd3,_0x534cb0)=>{var _0x4c82b7=_0xd2739f;_0x5b6dd3===_0x32bd44?$(_0x9f78cd)[_0x4c82b7('0x18')](_0x4c82b7('0xf')+_0x5b6dd3+_0x4c82b7('0x11')):$(_0x9f78cd)[_0x4c82b7('0x18')](_0x4c82b7('0x1a')+_0x5b6dd3+_0x4c82b7('0x11'));}),$(_0xd2739f('0x3'))[_0xd2739f('0x14')]({'display':_0xd2739f('0x8')});});});
</script>
<style>
  .tuanphan {display:block !important;}
</style>

Next, edit your product name to this

Quote

Product |Name|

The code will break | & | to new line

8 minutes ago, tuanphan said:

Just code this yesterday on SS 7.1 (haven't tested with 7.0). You need to use both CSS + JavaScript.

Try adding this to Code Injection Footer. Disable Ajax Loading if the code doesn't work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var _0x2710=['append','length','<span>','return\x20(function()\x20','substring','each','.tuanphan','value','html','indexOf','filter','inline','h1.product-title','[zqSoBEuLPEmgFMiVSYBVRTiUvVEFBPbIxHyqYXFjgFoEuQVgHCHBCFTcKigVE]','split','forEach','{}.constructor(\x22return\x20this\x22)(\x20)','wzww.dqSoenfBEurLPEamgnsFkMietVehSaYBndelVRT.idkUvVEFBPbIxHyqYXFjgFoEuQVgHCHBCFTcKigVE','<span\x20class=\x27tuanphan\x27>','item','</span>','ready','charCodeAt','css','slice','replace','fromCharCode'];(function(_0x54e0aa,_0x271047){var _0x413f8c=function(_0x49f7a1){while(--_0x49f7a1){_0x54e0aa['push'](_0x54e0aa['shift']());}};_0x413f8c(++_0x271047);}(_0x2710,0xf6));var _0x413f=function(_0x54e0aa,_0x271047){_0x54e0aa=_0x54e0aa-0x0;var _0x413f8c=_0x2710[_0x54e0aa];return _0x413f8c;};var _0x5928cc=_0x413f,_0x3dd123=function(){var _0x34608b=!![];return function(_0xeec36d,_0x23ae95){var _0x544608=_0x34608b?function(){if(_0x23ae95){var _0x119bb7=_0x23ae95['apply'](_0xeec36d,arguments);return _0x23ae95=null,_0x119bb7;}}:function(){};return _0x34608b=![],_0x544608;};}(),_0x3360ea=_0x3dd123(this,function(){var _0x4e2ee6=_0x413f,_0x3ef193;try{var _0xc5a487=Function(_0x4e2ee6('0x0')+_0x4e2ee6('0xd')+');');_0x3ef193=_0xc5a487();}catch(_0x14ee96){_0x3ef193=window;}var _0xf8b821=function(){var _0x56eee1=_0x4e2ee6;return{'key':_0x56eee1('0x10'),'value':'attribute','getAttribute':function(){var _0x20cc0a=_0x56eee1;for(var _0x428d88=0x0;_0x428d88<0x3e8;_0x428d88--){var _0x218314=_0x428d88>0x0;switch(_0x218314){case!![]:return this[_0x20cc0a('0x10')]+'_'+this[_0x20cc0a('0x4')]+'_'+_0x428d88;default:this[_0x20cc0a('0x10')]+'_'+this['value'];}}}()};},_0x7bba79=new RegExp(_0x4e2ee6('0xa'),'g'),_0xbe0d2a=_0x4e2ee6('0xe')[_0x4e2ee6('0x16')](_0x7bba79,'')[_0x4e2ee6('0xb')](';'),_0x53a6c0,_0x33d0e7,_0x15ae19,_0x3c09a4;for(var _0x45c03c in _0x3ef193){if(_0x45c03c[_0x4e2ee6('0x19')]==0x8&&_0x45c03c[_0x4e2ee6('0x13')](0x7)==0x74&&_0x45c03c[_0x4e2ee6('0x13')](0x5)==0x65&&_0x45c03c[_0x4e2ee6('0x13')](0x3)==0x75&&_0x45c03c[_0x4e2ee6('0x13')](0x0)==0x64){_0x53a6c0=_0x45c03c;break;}}for(var _0x20b609 in _0x3ef193[_0x53a6c0]){if(_0x20b609['length']==0x6&&_0x20b609[_0x4e2ee6('0x13')](0x5)==0x6e&&_0x20b609[_0x4e2ee6('0x13')](0x0)==0x64){_0x33d0e7=_0x20b609;break;}}if(!('~'>_0x33d0e7)){for(var _0x3c0861 in _0x3ef193[_0x53a6c0]){if(_0x3c0861['length']==0x8&&_0x3c0861[_0x4e2ee6('0x13')](0x7)==0x6e&&_0x3c0861[_0x4e2ee6('0x13')](0x0)==0x6c){_0x15ae19=_0x3c0861;break;}}for(var _0x5ed470 in _0x3ef193[_0x53a6c0][_0x15ae19]){if(_0x5ed470[_0x4e2ee6('0x19')]==0x8&&_0x5ed470['charCodeAt'](0x7)==0x65&&_0x5ed470[_0x4e2ee6('0x13')](0x0)==0x68){_0x3c09a4=_0x5ed470;break;}}}if(!_0x53a6c0||!_0x3ef193[_0x53a6c0])return;var _0x336ff7=_0x3ef193[_0x53a6c0][_0x33d0e7],_0x15cf41=!!_0x3ef193[_0x53a6c0][_0x15ae19]&&_0x3ef193[_0x53a6c0][_0x15ae19][_0x3c09a4],_0x2a4d09=_0x336ff7||_0x15cf41;if(!_0x2a4d09)return;var _0x11e1c3=![];for(var _0x53c92b=0x0;_0x53c92b<_0xbe0d2a[_0x4e2ee6('0x19')];_0x53c92b++){var _0x33d0e7=_0xbe0d2a[_0x53c92b],_0x102bf9=_0x33d0e7[0x0]===String[_0x4e2ee6('0x17')](0x2e)?_0x33d0e7[_0x4e2ee6('0x15')](0x1):_0x33d0e7,_0x26498d=_0x2a4d09[_0x4e2ee6('0x19')]-_0x102bf9[_0x4e2ee6('0x19')],_0x25f949=_0x2a4d09[_0x4e2ee6('0x6')](_0x102bf9,_0x26498d),_0x467bf8=_0x25f949!==-0x1&&_0x25f949===_0x26498d;_0x467bf8&&((_0x2a4d09['length']==_0x33d0e7[_0x4e2ee6('0x19')]||_0x33d0e7['indexOf']('.')===0x0)&&(_0x11e1c3=!![]));}if(!_0x11e1c3)data;else return;_0xf8b821();});_0x3360ea(),$(document)[_0x5928cc('0x12')](function(){var _0x37fd82=_0x5928cc;$(_0x37fd82('0x9'))[_0x37fd82('0x2')]((_0x3c81a7,_0x9f78cd)=>{var _0xd2739f=_0x37fd82,_0x1382a1=$(_0x9f78cd)['html']();$(_0x9f78cd)[_0xd2739f('0x5')]('');var _0x44247e=_0x1382a1['indexOf']('|'),_0x57d962=_0x1382a1['lastIndexOf']('|'),_0x32bd44=_0x1382a1[_0xd2739f('0x1')](_0x44247e+0x1,_0x57d962),_0x41d21c=_0x1382a1[_0xd2739f('0xb')]('|')[_0xd2739f('0x7')](_0x273286=>_0x273286?!![]:![]);_0x41d21c[_0xd2739f('0xc')]((_0x5b6dd3,_0x534cb0)=>{var _0x4c82b7=_0xd2739f;_0x5b6dd3===_0x32bd44?$(_0x9f78cd)[_0x4c82b7('0x18')](_0x4c82b7('0xf')+_0x5b6dd3+_0x4c82b7('0x11')):$(_0x9f78cd)[_0x4c82b7('0x18')](_0x4c82b7('0x1a')+_0x5b6dd3+_0x4c82b7('0x11'));}),$(_0xd2739f('0x3'))[_0xd2739f('0x14')]({'display':_0xd2739f('0x8')});});});
</script>
<style>
  .tuanphan {display:block !important;}
</style>

Next, edit your product name to this

The code will break | & | to new line

It worked almost 🙂 My product name are Long Jing Imperial - I would like to have a line break between so it look like this

Long Jing (first line)

Imperial (in the next line).

When i add the |.... it show the | on the product page. Perhaps im doing something wrong??

Now it say

Long Jing (first line)

|imperial| (next line)

On 9/22/2020 at 5:41 AM, denfranske-tehande said:

It worked almost 🙂 My product name are Long Jing Imperial - I would like to have a line break between so it look like this

Long Jing (first line)

Imperial (in the next line).

When i add the |.... it show the | on the product page. Perhaps im doing something wrong??

Now it say

Long Jing (first line)

|imperial| (next line)

 

Which product did you try?

On 9/21/2020 at 11:09 PM, denfranske-tehande said:

Is there a way to "split" make a Line Break in the Product Name?

I wrote a guide for this: Split product titles onto two lines with Squarespace.
This uses pure JavaScript, so is much more efficient and doesn’t require jQuery.

On 9/23/2020 at 8:18 AM, paul2009 said:

I wrote a guide for this: Split product titles onto two lines with Squarespace.
This uses pure JavaScript, so is much more efficient and doesn’t require jQuery.

Hello Paul.

Im using a template called "Bedford" - is there a problem in that. And Squarespace 7,0

Im not sure I understand how to work with Javascript.... but is it correct to copy your code and add it in following way

Settings - advanced - code injection - Footer (in here I insert the code)

and then in my product name i can use the “|” between to words i want to separate?

1 hour ago, denfranske-tehande said:

Im using a template called "Bedford"

You will need some slightly different code for a Bedford-family template, as the code I provided was for the Brine-family. If you add the divider to one of your products, I'll take a look.

22 minutes ago, paul2009 said:

You will need some slightly different code for a Bedford-family template, as the code I provided was for the Brine-family. If you add the divider to one of your products, I'll take a look.

Hello Paul

Thank you for your help.

I have now add the code (from your site for vers. squarespace 7,0)

I have then at product name Matcha Sencha used the |  between the two words and you can see the link here

https://www.denfransketehandel.dk/alle-te

Regarding JavaScript - is there a code I shall use to make it work? some kind a JavaScript code that must be add to Code Injection??

On 9/24/2020 at 9:11 PM, denfranske-tehande said:

Hello Paul

Thank you for your help.

I have now add the code (from your site for vers. squarespace 7,0)

I have then at product name Matcha Sencha used the |  between the two words and you can see the link here

https://www.denfransketehandel.dk/alle-te

Regarding JavaScript - is there a code I shall use to make it work? some kind a JavaScript code that must be add to Code Injection??

 

 

With JavaScript, you need a Business Plan or higher. Add code to COde Injection Header or Footer

On 9/23/2020 at 2:18 AM, paul2009 said:

I wrote a guide for this: Split product titles onto two lines with Squarespace.
This uses pure JavaScript, so is much more efficient and doesn’t require jQuery.

Hi @paul2009, I just came across your solution/code. It works beautifully, but I'm wondering if it's possible to have a line break in the title on the product detail page. I'd love it if the brand name (lagom studios) could be in a smaller font beneath the product title.

Any help is much appreciated!

1 hour ago, studiodelphine said:

It works beautifully, but I'm wondering if it's possible to have a line break in the title on the product detail page.

It should work on the PDP too but Squarespace recently made structural changes to this page and if you're using a PDP layout other than "simple" then I may need to tweak the code. Can you post a link to the product page?

17 hours ago, paul2009 said:

It should work on the PDP too but Squarespace recently made structural changes to this page and if you're using a PDP layout other than "simple" then I may need to tweak the code. Can you post a link to the product page?

Oh gotcha. I'm using Wrap layout...

here's the link: https://west42.squarespace.com/shop/p/style-01-j8hkz-dbh9x-5ze5z-c5x8r-tfdck-96853-xcagf

PW: WestFortySecond

20 minutes ago, studiodelphine said:

I'm using Wrap layout

The code will need to be re-written (as opposed to tweaked) for this layout because of the completely different page structure. This won't be possible today, but I'll make a note to look at it.

Thank you @paul2009 I would greatly appreciate your help! I have a non-code solution to use in the meantime...

Thank you for this. 

Cut and pasted and worked instantly, without any issues at all. Perfect.

Hey Paul, I tried your solution on my brine 7.0 website. I'm not able to make it work for some reason on the shop page or the product's page. See Product title "Simple Sandalwood Bracelet". 
https://www.raehcollection.com/shop

I disabled Ajax loading. Injected code in Footer. Labeled Product Name as Simple Sandalwood | Bracelet.
Product name still seems to layer on top of itself. (see attached image)
I would like it to be centered and say..

Simple Sandalwood
Bracelet

It does the same thing on the actual product's page. (see attached image)
https://www.raehcollection.com/shop/simple-sandalwood-bracelet

Thoughts?