Adding a second line/subtitle to grid and product detail pages

8 minutes ago, paul2009 said:

The code on our site is for Squarespace 7.1 sites, however Montauk is a Squarespace 7.0 template. Unlike Squarespace 7.1, every Squarespace 7.0 template family has a different structure and requires different code which is why the solution didn't work for you.

The code has been specifically written to look for a pipe symbol "|" so you'll need to insert one into your titles instead of parenthesis.

On Montauk you'll probably want to replace the two lines that refer to the List Title and the Detail Title with these:

var sfProdListTitle = '.collection-type-products #productList .product .product-title';
var sfProdDetailTitle = '#productDetails .product-title';

If it works for you please click 'like' below to let me know.

Hi Paul, Magic! that worked perfectly, thank you so very much!

Hi Paul, I have followed the instruction from your website, and the store title has successfully split to different lines using" | ", but the product detail page title is all mess up like my below pic, could you kindly help out? thank you. 

Also, how can I change the product details fonts without interfering store title font?

44 minutes ago, ZackYen said:

The product detail page title is all messed up like my below pic, could you kindly help out?

It looks like you've incorrectly set the line-height for this title. Try changing it in Site Styles, or if you've added a line of Custom CSS to set the line-height, adjust it to be at least 1.3em.

Hello there, 

Very new to coding, have been following along and making the line break for the product detail page and list view... until I try adding product blocks to the page, the line break did not translate, it still shows " | " instead of breaking to the subtitle.  Do you mind taking a look at it. https://www.mcwu.store/shop/p/icanread100books 
Thank you so much.

On 9/29/2021 at 2:20 PM, peaberry said:

Hello there, 

Very new to coding, have been following along and making the line break for the product detail page and list view... until I try adding product blocks to the page, the line break did not translate, it still shows " | " instead of breaking to the subtitle.  Do you mind taking a look at it. https://www.mcwu.store/shop/p/icanread100books 
Thank you so much.

It looks fine to me. Did you solve it?

Hi, I've managed to get the lines to break where I need them in my Product grid however the '|' symbol appears when that item is selected and appears in checkout. Is there an additional workaround for making sure that it doesn't appear there either?

@CMBorgman

The checkout page can not be altered. It is a SS security feature. Also we do not have access to the backend of SS so there is no code that can change the text of an ordered item in the backend and how it is stored.

The changes that can be made, where they can be made, are literally skin deep. It is a visual change on the client side not a storage change server side.

On 12/3/2020 at 3:00 PM, paul2009 said:

Palmera is a Squarespace 7.1 template and I provided some code to split product titles over two lines here: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

The article doesn't describe how to change the formatting of the two lines, but it is possible to do this with a little CSS. For example, on the Product Details Page:

/* Smaller second line */
.ProductItem .ProductItem-details h1.ProductItem-details-title {
  font-size: 22px;
  line-height: 1.8em;
}
/* Larger first line */
.ProductItem .ProductItem-details h1.ProductItem-details-title:first-line {
  font-size: calc(2.16vw + 1rem);
}

This CSS is just an example; I haven't tested it for your site because it is password-protected and therefore inaccessible.
 

I can't adjust the size of the second line that should be smaller, also how do I get the code to apply to a single product listing like one I've added to the homepage

On 7/30/2022 at 4:30 AM, nahlah said:

I can't adjust the size of the second line that should be smaller, also how do I get the code to apply to a single product listing like one I've added to the homepage

Can you share link to a product? We can check easier