Jump to content

Product title formatting issue.

Recommended Posts

Site URL: http://www.parade-books.com

Hi,

I am having some trouble with my product title consistency.

On the main page my product titles show perfectly with the formatting used but when the item is clicked the text changes to one long line and doesn't take into account the line breaks. Is there a way to keep the formatting like the main page?

See screen shots for a clearer explanation.

Here is the formatting used in the product page

Liz Johnson Artur<br>
<I>Liz Johnson Artur</I><br>
1st Edition, 2016<br>
Bierke

Here is the url and pass:

http://www.parade-books.com

huglin

Thank you 

Screenshot 2021-02-26 at 10.30.40.png

Screenshot 2021-02-26 at 10.30.47.png

Link to comment
  • Replies 9
  • Views 1.2k
  • Created
  • Last Reply
1 hour ago, bigrick said:

I am having some trouble with my product title consistency.

On the main page my product titles show perfectly with the formatting used but when the item is clicked the text changes to one long line and doesn't take into account the line breaks. Is there a way to keep the formatting like the main page?

This appears to be a new bug. But the issue is the opposite of what you want!

If everything were working correctly, you would not be able to add HTML to Product Titles. It would normally be stripped out when you save the product, but this is not currently working on Squarespace 7.0. This means that the HTML formatting is wrongly appearing on the Product List page. It should be like Product Detail page.

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

CSS can't do that kind of formatting.

Javascript can be used to reformat the text. You'd need to establish a pattern that the code can then parse into the final format you want. For example in the title of the product you could do something like...

Liz Johnson Artur, Liz Johnson Artur, 1st Edition, 2016, Bierke

If the established pattern can always be followed then the code should be pretty easy to write to reformat the title. If the pattern can't always be followed then things get more complex.

Do you think this pattern reformatting would work for your needs?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
7 hours ago, bigrick said:

Is there a way to make this work at all?

I provided a solution in the guide below. It uses JavaScript and follows a pattern, almost exactly like creedon described above.

https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

 

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
On 3/2/2021 at 9:53 PM, bigrick said:

Thanks so much, super helpful.

It's worked perfectly for the product page but the | show up on the main page now, see screen shot. 

Is there a way to remove the |'s on the main page too?

Thanks so much.

Screenshot 2021-03-02 at 14.50.46.png

Screenshot 2021-03-02 at 14.50.56.png

Hi. Have you solved this yet?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/2/2021 at 2:53 PM, bigrick said:

Is there a way to remove the |'s on the main page too?

Hey @bigrick. Squarespace changed the classes (again!) since my guide was written. If you change the sfProdListTitle line at the beginning of the code to the following (see below), it should work as expected.

var sfProdListTitle = '.ProductList h1.ProductList-title';

I'll update the guide for the benefit of others.

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.