Jump to content

Split product titles onto two lines, make second line Italics

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
20 hours ago, rodabaugh said:

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

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...
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

Link to comment
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

image.thumb.png.9acef714046e942a6b2bddc9db880c91.png

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

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

Link to comment

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@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

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.