Split product titles onto two lines, make second line Italics

I have used this code to make my product title two lines, but I am now trying to to have the second line italicized. Any suggestions? 

Hi,

I want to add a second line to the product title in Squarespace. 

I added an example from the website hellomantle. 

I want a Product title and then a smaller description underneath... 

Is that possible? 

Thanks

2 hours ago, Tbackhausen said:

Is that possible?

Yes. The original poster pointed to a technique @paul2009 wrote about and paul2009 expounded in his post.

One thing to note. Adding text to the title means that it will become part of the product title and will appear everywhere, invoices, the backend, and etc.

If you don't want the extra text to go everywhere, then you need a different technique. Without knowing the purpose of your extra text I can't say which one might work. But one example might be to use tags. Then CSS could add extra text that the user would see but it wouldn't store that text in the backend.

On 3/8/2023 at 11:35 AM, paul2009 said:

I wrote the guide that you've used. At the end of the guide, you'll find a section titled Styling that explains how to use CSS to style either both lines or the first line.

You can use the CSS font-style: italic; to set an italic font style and font-style: normal; to set a normal font style.

Let me know if this helps.

Did this help? Please give feedback by clicking an icon below  ⬇️ 

First time poster and user of squarespace, so forgive me if I am doing something wrong. I injected the code from your guide but it is only placing the pipe (|) in the product name field and not separating the lines. Any help would be greatly appreciated.

Site is https://khaki-begonia-bk6c.squarespace.com/

Password is RigworksDemo

On 8/25/2023 at 4:22 AM, Kevin_S said:

First time poster and user of squarespace, so forgive me if I am doing something wrong. I injected the code from your guide but it is only placing the pipe (|) in the product name field and not separating the lines. Any help would be greatly appreciated.

Site is https://khaki-begonia-bk6c.squarespace.com/

Password is RigworksDemo

Hi,

I see it worked to me

On 8/27/2023 at 4:13 AM, tuanphan said:

Hi,

I see it worked to me

@tuanphan Yes I was able to finally figure it out. Thanks for the reply.

Hi @paul2009 thanks for sharing the CSS code for this style change. It is my first time using CSS so I may have not done this properly, but I just copied and pasted the two lines code into Settings > Advanced > Code Injection > Footer: as indicated,. And hey presto it did split the two lines of the product title. However it left the "|" symbol showing on the product details page.

Also when I copied and pasted the styling code for the 2nd line of product title nothing changed even when I changed the font size to a smaller one in case the product title font was also 22px.

Can you help at all?

Hey @JGart. I'm guessing that you're using one of the newer Product Detail Page (PDP) layouts?

The guide was written when Squarespace only had a "Simple" PDP layout, but now they offer Full, Half and Wrap. I've just updated one line within the script and the CSS to make it compatible with these layouts. 

Please try the updated versions. If you have problems, please post back with a link to the page on your site.

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 Thanks so much for your prompt reply. I have used the updated code and removed the larger first line for the footer code injection and the "|" character has now disappeared but there is still no change in the second line font size - see https://www.janegledhillart.com/shop/p/katrinas-allotment-giclee .

However the larger first line and smaller second line did appear on the product list page but the stretched first lien was too big as I only need a small difference in font size say 18px first line and 14px second line. When I removed the 2nd bit of the custom CSS code relating to the larger first line and changed the font size to 18px in the first bit of the code it looked better on the product list page - see https://www.janegledhillart.com/shop