Jump to content

Product name styling (without separating lines)

Recommended Posts

Hello, hoping someone could help me with a styling problem. I'm selling books in my store and would like to include the Title and Sub-title in the 'product name' field. I've seen the article 'Split product titles onto two lines with Squarespace' and it's styling options. This isn't the approach I'd like to take, I'd like the main title to appear as I currently have it 'normal', and everything after the colon to appear 'italic', but I don't want to force any line breaks. I haven't published yet but I'll attach a screenshot below.

For example:  Letters for the Millennium: Why We Cut Letters in Stone.

Thank you in advance,

John

Screenshot 2023-09-27 at 16.17.16.png

Link to comment

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

I believe the code Paul provided covers this.

/* Style examples for Product Titles */
/* Product Title: smaller second line on product detail page */
.ProductItem .ProductItem-details h1.ProductItem-details-title, .products.collection-content-wrapper .grid-main-meta .grid-title {
  font-size: 22px;
  line-height: 1.8em;
}

/* Product Title: larger first line on product detail page */
.ProductItem .ProductItem-details h1.ProductItem-details-title:first-line, .products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: calc(2.16vw + 1rem);
}

You should just be able to add your italic code here.

Edited by KwameAndCo

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
  • 1 month later...

@Lettercutter

Does this help? If not, I actually wrote a plugin a while back that does this that I didn't release. I might be able to dig up and package it so I can put it out there and share.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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.