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

  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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.

8 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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 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 post
  • 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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...