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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

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

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

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

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