Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Title Font Style in Product Block?


MattCav

Question

Site URL: https://www.nesthomeware.com/cast-iron-sets

Hi all,

I'm creating pages (rather than categories, for SEO purposes) to show similar groups of products in addition to my main Store page. To do this, I'm using Product Blocks.

The default Product Block fonts for product details are different than on Store Pages, but I'd like for them to be the same (following the same styling as the Store Pages). 

See links below for example.

https://www.nesthomeware.com/shop : The product titles here follow the heading text font. I like it!

https://www.nesthomeware.com/cast-iron-sets : The product titles here follow the body text font. I'd like to change it to the heading text, as above.

Is there a simple code fix here that can be injected to these specific pages?

Thanks!

-Matt

Link to comment

13 answers to this question

Recommended Posts

  • 1

Add to Page Settings > Advanced > Header

<style>
  .product-block .productDetails .product-title {
    font-family: orpheus-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1
9 hours ago, Amador said:

Hi guys, I'm dealing with the same problem. The code above almost worked but I can't figure out how to adjust the price below the title of the product blocks. 

I'm trying to match the style and look of this - https://swan-hen-n4m6.squarespace.com/purchase-catalogues

I got close but it's not quite there yet - https://swan-hen-n4m6.squarespace.com/kids-classes-camps 

Any help would be greatly appreciate it. Thanks!

<style>
  .product-price {
    font-size: 10px !important;
    color: red;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi guys, I'm dealing with the same problem. The code above almost worked but I can't figure out how to adjust the price below the title of the product blocks. 

I'm trying to match the style and look of this - https://swan-hen-n4m6.squarespace.com/purchase-catalogues

I got close but it's not quite there yet - https://swan-hen-n4m6.squarespace.com/kids-classes-camps 

Any help would be greatly appreciate it. Thanks!

Link to comment
  • 0
13 hours ago, Ndi said:

Hey, 

I uploaded a font to my site called Panamera and would like to use it site wide. instead of having multiple font styles.

My site is https://www.tribeandsol.com 

 

Thanks

Answered on other question.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
18 hours ago, mccallkeller said:

Hey does anyone know who to also change the fonts on the page that shows just one of your products? I can't find it anywhere! Thanks so much for the help. 

this is one of the pages I'm trying to add my custom fonts to: https://www.andthenjewelry.com/collections/beni-shoga-n8amh

 

Which elements?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi All, facing the same problem but with the font size on the 'view all' section with product categories. The font size doesn't seem too large for desktop view but it's not responsive and doesn't adjust when the screen is shrunk and the text cuts off in mobile view – any help? (screenshots attached).

Link to site: https://trombone-bumblebee-yms9.squarespace.com/config/pages/5f69e05dba1bde0a4560f05c

pw: camilamesquita

Template: Maru

Cheers!
Nabil 

 

 

Screenshot 2020-10-01 at 14.20.31.png

Screenshot 2020-10-01 at 14.35.04.png

Link to comment
  • 0
1 hour ago, noblestudio said:

Hi All, facing the same problem but with the font size on the 'view all' section with product categories. The font size doesn't seem too large for desktop view but it's not responsive and doesn't adjust when the screen is shrunk and the text cuts off in mobile view – any help? (screenshots attached).

Link to site: https://trombone-bumblebee-yms9.squarespace.com/config/pages/5f69e05dba1bde0a4560f05c

pw: camilamesquita

Template: Maru

Cheers!
Nabil 

/config is url for site owner

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
15 hours ago, noblestudio said:

Sorry! here's the url: https://trombone-bumblebee-yms9.squarespace.com/products password as above.

Cheers! @tuanphan 

@tuanphan Managed to find the solution from another thread that was resolved by you! It seems when using this code to customise the size for product category title, it becomes responsive in mobile – which is great!

/* category title size */
h3.nested-category-title {
    font-size: 42px !important;
}

Thanks for the help! 

N

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