Jump to content

Change Product Title Thickness

Go to solution Solved by Lesum,

Recommended Posts

I've tried multiple times to make the title of a product thicker (from 400 to 700) but I can't figure out how to change it. Any ideas? If I could at least assign this style to be a "Header" instead of "Paragraph" that might work, but I can't click on this text in Site Styles mode so I don't know how to re-assign the Product Title. 

Screenshot 2024-06-03 at 6.59.12 PM.png

Link to comment

@haley81834952 Add this code under Custom CSS to change the product title font on collection pages

.product-block .productDetails a.product-title {
    font-family: var(--heading-font-font-family) !important;
    font-weight: var(--heading-font-font-weight) !important;
    font-style: var(--heading-font-font-style) !important;
    line-height: var(--heading-font-line-height) !important;
    letter-spacing: var(--heading-font-letter-spacing) !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

It's not currently working.. I pasted the text as you had it, but that wasn't working so I made some changes and added the actual information to match what my site has set as a "Heading"

.product-block .productDetails a.product-title {
    font-family: var(helvetica-neue) !important;
    font-weight: var(700) !important;
    font-style: var(normal) !important;
    line-height: var(1.4em) !important;
    letter-spacing: var(0em) !important;
}

This also didn't work. What do I need to do different? 

Link to comment
  • Solution

@haley81834952 Homepage has summary blocks, which are set up completely differently from the collection pages. The previous code was only for collection pages.

Here's the updated code for both the homepage and collection pages:

.product-block .productDetails a.product-title, .summary-block-wrapper .summary-title a.summary-title-link {
    font-family: var(--heading-font-font-family) !important;
    font-weight: var(--heading-font-font-weight) !important;
    font-style: var(--heading-font-font-style) !important;
    line-height: var(--heading-font-line-height) !important;
    letter-spacing: var(--heading-font-letter-spacing) !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.