Jump to content

Line break with product titles

Recommended Posts

Hi thanks for you answers,

Tuanphan i tried what you proposed but it doesn't work and I look on the site to see the other options none work.

Maybe it was for the 7.0 version?

At the moment the site adds automatic spacing but i would like to add a line break where i want for example.

Gamay | Nature Rouge
Domaine de Beauvent

Instead of

Gamay | Nature Rouge | Domaine
de Beauvent

Thanks for you help i really appreciate it

 

Link to comment
8 hours ago, vivaaweb said:

Hi thanks for you answers,

Tuanphan i tried what you proposed but it doesn't work and I look on the site to see the other options none work.

Maybe it was for the 7.0 version?

At the moment the site adds automatic spacing but i would like to add a line break where i want for example.

Gamay | Nature Rouge
Domaine de Beauvent

Instead of

Gamay | Nature Rouge | Domaine
de Beauvent

Thanks for you help i really appreciate it

 

Can you keep above code & let me know? I will check again.

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
59 minutes ago, vivaaweb said:

I ask sf digital and it doesn't work with squarespace 7.1

The code referred to was for 7.0 and needed to be modified for Squarespace 7.1. Here's a version that should work in your situation. 

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

Let me know how you get on.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 2 months later...
On 3/24/2020 at 9:27 PM, paul2009 said:

The code referred to was for 7.0 and needed to be modified for Squarespace 7.1. Here's a version that should work in your situation. 

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

Let me know how you get on.

HI @paul2009, im struggling with achieving the same for my website.... probably not injecting code where it should be...

can you point me into the right direction?

https://greenvitamin.com/products-probiotics

on hover product name shows up but would be great to have weight in line below...

 

Screenshot 2020-06-25 at 9.12.22 PM.png

Screenshot 2020-06-25 at 9.12.15 PM.png

Link to comment
1 hour ago, emset said:

im struggling with achieving the same for my website

Did you add the symbol to any of the product titles? I couldn't see it.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
On 6/25/2020 at 10:28 PM, paul2009 said:

Did you add the symbol to any of the product titles? I couldn't see it.

yeah first one..  RAW COCONUT YOGURT natural 300g...

as far as code injection... I guess that's where I am missing mark, i struggle to find other place than - design\custom CSS but it is obviously wrong

Screenshot 2020-06-27 at 10.06.13 AM.png

Link to comment
  • 2 months later...

Hi all,

Indeed, I'm struggling with the same issue of the code injection not working. Squarespace's code injection on 7.1 allows it to affect only header, footer, and lockscreen. So in order for @paul2009's clever javascript to work... where do you put it?

And finally: will this code injection work anywhere a product is displayed (i.e. shop, product block, gallery block displaying products)?

Kind thanks!

Amanda

Edited by amandadrienne
Link to comment
2 hours ago, amandadrienne said:

Squarespace's code injection on 7.1 allows it to affect only header, footer, and lockscreen. So in order for [it] to work... where do you put it?

When you "inject" code, you have the option of adding it within the header or the footer (or the lock screen). Injecting it in the footer does not mean that it will only affect the footer, it means that it will load after the page content has loaded. It’s important to insert code in the footer so that the elements that you want to affect have loaded before the code, otherwise the code cannot affect them. 

Therefore, add the code to Settings > Advanced > Code Injection > Footer
 

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

@paul2009 thank you this worked for me partially. I was able to create two lines for product title on my shop page  but it did not change on the product page itself where I initiated the change. Instead it looks like this there:  be awake | modern breakfast.  I thought the "|" would disappear here as well and break to two lines. Any thoughts?

 

Edited by misuba
Link to comment
4 hours ago, misuba said:

it did not change on the product page itself where I initiated the change

To help you, I’ll need to view the product in your site. Please post a working link.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
5 hours ago, misuba said:

you will see shop page is fine but product pages it did not execute

The code snippet was only ever designed for Product List pages which is why it didn't work on your Product Detail pages. However, I've updated it now - use the same link as before.

 

6 hours ago, misuba said:

if you also have a way to adjust vertical padding between price and variant box on product pages that would be wonderful.

You can add this to Custom CSS and adjust the margin to suit (it is 25px by default):

.ProductItem-details .ProductItem-product-price {
  margin-bottom: 5px;
}

 

  If this helps you, please click "Like" below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 2 weeks later...
13 hours ago, simonkeeping said:

Hi there, I've added in the code and it's worked on the product page (so thanks for that!) but on the main products grid the text looks really untidy. Is there a way of adding in hard returns to push some of these widows onto the next line?
Thanks

Can you share link to page in screenshot? We can check easier.

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
  • 2 months later...

This has been a helpful thread!
 

92919991_ScreenShot2020-11-18at7_24_45PM.thumb.jpg.fd37f0bd5ce200e644ca0746444e0a87.jpg

 

Now, I would like to make the second line normal and a lighter weight
 

For example: 
"Chehalem Fall (2)"
    Fine Art Print

Is it possible to make the text to the right of the ( - ) normal and a lighter weight? 
1881028547_ScreenShot2020-11-18at7_28_50PM.thumb.jpg.1585fb5b21deffeadc38b4dc5e5f6228.jpg

 

Website: www.BrendanAlexPhoenix.com
Version: 7.0
Family/Template: York Family (Jones Template) 

Thank you! 

CptFeeny

Edited by CptFeeny
Removing copyrighted material
Link to comment
3 hours ago, CptFeeny said:

This has been a helpful thread!

I have successfully added this Javascript from SF.Digital to achieve a line break for product titles. @tuanphan @paul2009

https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles

 

92919991_ScreenShot2020-11-18at7_24_45PM.thumb.jpg.fd37f0bd5ce200e644ca0746444e0a87.jpg

 

Now, I would like to build on that code and make the second line normal and a lighter weight
 

For example: 
"Chehalem Fall (2)"
    Fine Art Print

Is it possible to make the text to the right of the ( - ) normal and a lighter weight? 
1881028547_ScreenShot2020-11-18at7_28_50PM.thumb.jpg.1585fb5b21deffeadc38b4dc5e5f6228.jpg

 

Website: www.BrendanAlexPhoenix.com
Version: 7.0
Family/Template: York Family (Jones Template) 

Thank you! 

CptFeeny

Can you share link to product in screenshot? We can check easier

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

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.