Line break with product titles

Site URL: https://www.soulwines.ch

Hello,

I was wondering if there is anyway of adding line breaks to product titles?

Here is my site

www.soulwines.ch

Thanks for your help

Sean

1 hour ago, vivaaweb said:

Site URL: https://www.soulwines.ch

Hello,

I was wondering if there is anyway of adding line breaks to product titles?

Here is my site

www.soulwines.ch

Thanks for your help

Sean

Hi , Do you want spacing between first and second line of product title? 

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

edit 

.image-slide-title

to

.grid-title

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

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.

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

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.

Thank you so much it's working perfect.

My product page is much more clear and logic for my clients now!!!!

😀

Thanks Paul, that worked a treat. Really appreciate the help/link.. 

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

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.

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

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

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. 
 

@paul2009 Thank you! I so appreciate your clear explanation of not just how to do this, but why it works. I'll keep your company, SF Digital, in mind for advanced services and help in the future. Thanks again.

@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?

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.

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

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

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  ⬇️

Wow thanks -- that's a lot of extra code. Worked like a charm!  Much appreciated!!

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

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.

This has been a helpful thread!
 

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? 

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

Thank you! 

CptFeeny

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

 

 

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? 

 

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

15 minutes ago, tuanphan said:

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

https://www.brendanalexphoenix.com/prints-oregon