Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Line break in product name


denfranske-tehande

Question

13 answers to this question

Recommended Posts

  • 0

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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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)

 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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?

 

Link to comment
  • 0
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.

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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??

 

 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!1496527049_ScreenShot2022-05-11at2_55_30PM.png.c02bdc54220941cfb4ba9952d03dd3d6.png

Link to comment
  • 0
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?

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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

Link to comment
  • 0
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.

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...