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

Product title formatting issue.


bigrick

Question

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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 th

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 e

Posted Images

9 answers to this question

Recommended Posts

  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

Link to post
  • 0

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 best , and see my profile. Thanks for your support!

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

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

Link to post
  • 0

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

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

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

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...