How can I adjust heading font sizes in Empire theme?

[Vocation]

Hi everyone, 

I am currently using Empire (ver. 11.0.0) by Pixel Union.

On a product page, I was wondering is there a way to change the font size and typography of the different heading styles (i.e. h2, h3, h4 etc.)?

I have reached out to them and they suggested posting in here as this requires coding.

My store URL is: https://vocationgardenspaces.co.uk/

Thanks in advance!

[sahilsharma9515]

Hi @Vocation 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[Vocation]

Hi @sahilsharma9515 

My store URL is https://vocationgardenspaces.co.uk/

[sahilsharma9515]

Hi @Vocation  Thanks for the URL. Please add the code in your theme.css/base.css/style.css file which is available in your theme.

 .product-title {
      font-size: 10px !important; /*edit the number according to your need */
   }

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
6. You can add the above code at the bottom of the file.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Vocation]

Thanks for this but I was wondering whether you could apply this to the different headings (i.e h1, h2, h3 etc.) rather than just the product title.

Thanks.

[sahilsharma9515 · Accepted solution]

Hi @Vocation Yes you can do it no issues.

here is your updated code for that 

h1, h2, h3 {
      font-size: 10px !important; /*edit the number according to your need */
   }

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[stafems]

Hi, I ahve tried this for a h2 in my product description which is showing up in store huge , and its made no change i added it at the bottom of the theme.css file , any advice ? many thanks

[sahilsharma9515]

Hi @stafems Can You please provide me your store URL so that I can look into this.

Best Regards

Sahil

[niraj_patel]

Hello @Vocation 
Can you share store URL?

[Vocation]

Hi @niraj_patel 

My store URL is https://vocationgardenspaces.co.uk/

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .product-title {
      font-size: 20px !important; /*Adjust according to you*/
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Vocation]

Thanks for this but this appears to only work for the product title. I was wondering whether you could apply this to the different headings (i.e h1, h2, h3 etc.)

Thanks.

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  h1, h2, h3 {
      font-size: 20px !important; /*Adjust according to you*/
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.