Originally written in March 2020.
Updated in February 2026 for multiple lines.

Squarespace doesn’t allow HTML markup in collection titles. This applies to Gallery, Blog and Product collections. This means that if you cannot insert a line break (HTML: <br>) in a product title so that it appears over two lines. For example, you may want to display a product’s brand on a separate line, but this isn’t possible without code.

This solution below is for all new Squarespace sites (using version 7.1). It uses some JavaScript which means that it will work on any plan except Personal and Basic billing plans (because these cheaper plans do not officially support JavaScript).

This particular workaround is for Product pages. I’ve added a pipe symbol (“|”) in the product description to separate the elements that I’d like to appear on the first and second line. This separator will appear when the product name appears in the cart, checkout and so on. However, when the code runs, it removes this character from the Products page and replaces it with a line break so that the title appears on two (or more) lines. For example, if you use the title Gazelle Junior | adidas it will appear on two lines like this:

Gazelle Junior
adidas

If you would prefer to use a different separator character, you can choose your own, in the first few lines of the code.

Note that spaces are required before and after the character in this example.

Add the following code to the site’s Footer Code Injection area. If you aren’t sure where to find this, see where is the code injection panel.

<!--- Wrap Product titles on Squarespace 7.1 -------------------->
<!--- Copyright Soundfocus Digital [https://sf.digital] --------->
<!--- Use freely in your code injection. Do NOT re-publish ------>
<!--- Version 1.2, February 2026 -------------------------------->
<script>
const sfProdTitleSeparator = ' | ';
const sfProdTitleSelector = '.product-list-item-title, .product-detail .product-title, .product-block .product-title, .summary-item .summary-title';
const _0x42716a=_0x544f;function _0x544f(_0x4e7f0a,_0x557717){_0x4e7f0a=_0x4e7f0a-0xb4;const _0x107af4=_0x107a();let _0x544ffb=_0x107af4[_0x4e7f0a];return _0x544ffb;}(function(_0xe802ec,_0x11655e){const _0x5642d9=_0x544f,_0x4d8ab0=_0xe802ec();while(!![]){try{const _0x2a2b71=parseInt(_0x5642d9(0xca))/0x1*(-parseInt(_0x5642d9(0xb6))/0x2)+parseInt(_0x5642d9(0xbf))/0x3*(-parseInt(_0x5642d9(0xce))/0x4)+parseInt(_0x5642d9(0xcb))/0x5+-parseInt(_0x5642d9(0xb8))/0x6+-parseInt(_0x5642d9(0xcd))/0x7+-parseInt(_0x5642d9(0xb7))/0x8+-parseInt(_0x5642d9(0xc8))/0x9*(-parseInt(_0x5642d9(0xc5))/0xa);if(_0x2a2b71===_0x11655e)break;else _0x4d8ab0['push'](_0x4d8ab0['shift']());}catch(_0x114c00){_0x4d8ab0['push'](_0x4d8ab0['shift']());}}}(_0x107a,0xb79f9),window[_0x42716a(0xb9)]('DOMContentLoaded',_0x5dd144=>{const _0x5a0b71=_0x42716a;console[_0x5a0b71(0xbb)](_0x5a0b71(0xba));const _0x2366b0=document[_0x5a0b71(0xb5)](sfProdTitleSelector);console[_0x5a0b71(0xbb)]('Found\x20'+_0x2366b0['length']+'\x20title\x20element(s)'),_0x2366b0['forEach'](_0x5aadcd=>{const _0x4c072b=_0x5a0b71,_0x36f346=_0x5aadcd[_0x4c072b(0xc4)][_0x4c072b(0xc7)](sfProdTitleSeparator);if(_0x36f346[_0x4c072b(0xc1)]>=0x2){_0x5aadcd[_0x4c072b(0xc9)]='',_0x36f346[_0x4c072b(0xc0)](0x0,-0x1)[_0x4c072b(0xb4)](_0x33abdc=>{const _0x267e6a=_0x4c072b,_0x30e455=document[_0x267e6a(0xc6)]('div');_0x30e455[_0x267e6a(0xbc)]='sf-pre-title',_0x30e455['textContent']=_0x33abdc[_0x267e6a(0xc3)](),_0x5aadcd[_0x267e6a(0xcc)](_0x30e455);});const _0x99a1e6=document[_0x4c072b(0xc6)](_0x4c072b(0xbd));_0x99a1e6[_0x4c072b(0xbc)]=_0x4c072b(0xc2),_0x99a1e6[_0x4c072b(0xbe)]=_0x36f346[_0x36f346[_0x4c072b(0xc1)]-0x1][_0x4c072b(0xc3)](),_0x5aadcd[_0x4c072b(0xcc)](_0x99a1e6);}});}));function _0x107a(){const _0x2ba5c5=['div','textContent','177bXBjdD','slice','length','sf-title','trim','innerText','7481220TXKYgv','createElement','split','9uFzJgg','innerHTML','2CTmNNW','6679760goAWTF','appendChild','3008530iSRCrd','992LxtcZA','forEach','querySelectorAll','216222CpIAZj','1558608boSPBC','2858898SVVthv','addEventListener','Wrap\x20Product\x20titles\x20v1.2\x20(c)\x20Soundfocus\x20Digital\x20Ltd\x20[https://sf.digital]','log','className'];_0x107a=function(){return _0x2ba5c5;};return _0x107a();}
</script>

Styling

If you want to format each line of text differently, you can add some CSS to the Custom CSS panel. For example:

/* Product Title: first pre-title line */
.sf-pre-title:first-child {
  font-size: .7em;
  color: #666;
}

/* Product Title: second pre-title line */
.sf-pre-title:nth-child(2) {
  font-size: .8em;
  color: #666;
}

/* Product Title: final line */
.sf-title {
  color: #000;
}

You could combine these selectors with classes for the title on the Product List Page or the Product Detail Page to limit their effect, if required.