Jump to content

How do I change the size of the item names on the shop page?

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://collie-oriole-x7fl.squarespace.com/

I'd like to style the product title as they're currently too big. I've tried the solutions below that I found online with no success. I'm not sure what the issue is. Help would be much appreciated :)

.ProductList .ProductList-title {
	font-size: 30px;
}

Failed 

 

<style>
  .product-title {
    font-size: 4rem !important;
}
</style>

Failed

 

/* Product Block Titles */
.product-block .productDetails .product-title {
  font-size: 1.8em;
}
/* Product Block Prices */
.product-block .productDetails .product-price {
  font-size: 1.5em;
}

Failed

 

 

Link to comment
  • Solution
1 hour ago, hbakhsh said:

I'd like to style the product title as they're currently too big.

Although you've posted this in the 'Coding' section, you won't need code to style product titles.

You can do this in the Site Styles panel on your Squarespace 7.1 site.

Go to Design > Site Styles > Fonts > Assign Styles.

Scroll down to the Product Detail Page section and click Item Title.

7point1-site-styles-product-detail-page.png.b0aedb8cd1e60b0d9912b50052ad355e.png

In Size: Size, change Heading to another heading choice or Custom to select a non-standard size.

site-styles-7-1-product-title-size.gif.244920b90f89e4aac687f880af356dfa.gif

  If this helps you, please click "Like" below  ⬇️

7point1-site-styles-product-detail-page-item-title-size.png

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
1 hour ago, paul2009 said:

Although you've posted this in the 'Coding' section, you won't need code to style product titles.

You can do this in the Site Styles panel on your Squarespace 7.1 site.

Go to Design > Site Styles > Fonts > Assign Styles.

Scroll down to the Product Detail Page section and click Item Title.

7point1-site-styles-product-detail-page.png.b0aedb8cd1e60b0d9912b50052ad355e.png

In Size: Size, change Heading to another heading choice or Custom to select a non-standard size.

site-styles-7-1-product-title-size.gif.244920b90f89e4aac687f880af356dfa.gif

  If this helps you, please click "Like" below  ⬇️

7point1-site-styles-product-detail-page-item-title-size.png

 

Thank you so much! I really appreciate it.

Link to comment
  • 5 months later...
  • 1 month later...
On 10/13/2021 at 3:36 PM, LeeT said:

Hi Paul,

How do you change the scroll font size on the product page? Do we have to add code? Can I turn scroll off? 

Much appreciated!

Lee

Product Font Size Navigation Issue.JPG

Can you share link to a product ín screenshot?

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
  • 4 weeks later...
On 4/5/2021 at 8:23 AM, paul2009 said:

Although you've posted this in the 'Coding' section, you won't need code to style product titles.

You can do this in the Site Styles panel on your Squarespace 7.1 site.

Go to Design > Site Styles > Fonts > Assign Styles.

Scroll down to the Product Detail Page section and click Item Title.

7point1-site-styles-product-detail-page.png.b0aedb8cd1e60b0d9912b50052ad355e.png

In Size: Size, change Heading to another heading choice or Custom to select a non-standard size.

site-styles-7-1-product-title-size.gif.244920b90f89e4aac687f880af356dfa.gif

  If this helps you, please click "Like" below  ⬇️

7point1-site-styles-product-detail-page-item-title-size.png

Thanks for this! How about changing the "Recommended for You" font size as here below?

Screen Shot 2021-11-05 at 10.04.33 PM.png

Link to comment
  • 5 months later...
On 4/5/2021 at 5:23 PM, paul2009 said:

Although you've posted this in the 'Coding' section, you won't need code to style product titles.

You can do this in the Site Styles panel on your Squarespace 7.1 site.

Go to Design > Site Styles > Fonts > Assign Styles.

Scroll down to the Product Detail Page section and click Item Title.

7point1-site-styles-product-detail-page.png.b0aedb8cd1e60b0d9912b50052ad355e.png

In Size: Size, change Heading to another heading choice or Custom to select a non-standard size.

site-styles-7-1-product-title-size.gif.244920b90f89e4aac687f880af356dfa.gif

  If this helps you, please click "Like" below  ⬇️

7point1-site-styles-product-detail-page-item-title-size.png

 

I'm having the same issue with the product item font being too large. When I follow @paul2009 's suggestion to navigate to Design > Site Styles > Fonts > Assign Styles, the menu doesn't show the Product Detail Page section (see attached screenshot).

What am I missing?

The page I'm working on:

https://vioro.co/tickets/p/dedications-ema-nikolovska-kunal-lahiry-friedemann-slenczka

Thanks in advance!

 

Screenshot 2022-04-30 at 10.13.05.png

Link to comment
On 4/30/2022 at 9:16 AM, TVJ said:

When I...navigate to Design > Site Styles > Fonts > Assign Styles, the menu doesn't show the Product Detail Page section. What am I missing?

The style options only appear if you are using the "Simple" Product Detail Page (PDP) layout. The newer Full, Half and Wrap layouts have fixed configurations that cannot be customised, so the options won't appear when you have selected one of these. For more information about the PDP layouts, see this support guide.

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

Edited by paul2009

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

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.