How can I adjust the product page title text size in the Refresh theme?

Store Design
, , ,
1

Hi guys, I would like to change the size of the Product Page Title text for the Refresh theme, as it is too large. So this is the text at the top of the page.

Can somebody please let me know how this can be done?

Store page url: https://www.farandwideofficial.com/products/family-passport-holder-black-for-4

Current text:

mrtkmk_0-1678260919869.png
mrtkmk_0-1678260919869.png1156×318 15.8 KB

Any help appreciated.

Thanks!

2

Hello @mrtkmk ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1678261397092.png
GemPages_0-1678261397092.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

3

@mrtkmk

.product__title h1 {
    font-size: 21px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

4

Thank you for your response! I have two quick questions:

  1. What’s the difference between adding it to base.scss.liquid vs to theme.liquid theme file?

  2. Will your solution also apply to mobile?

Thanks :blush:

5

@mrtkmk

Yes, this solution will work on Mobile also.

Both are CSS files some themes have a base. scss. liquid and some themes have theme.scss.liquid file.

you have a base.scss file. so add it.

6

login to backend → Go To Online Store → Edit Code → section-main-product.css

.product__title > * {
font-size:10px;
}

then your question will solved

7

Hi, thank you for your response. I have another question for you. I’ve been advised in the responses to edit three different files:

section-main-product.css
base.scss.liquid
theme.liquid

Which of these is the correct file to update?

Thanks

8

@mrtkmk

base.scss.liquid

9

Hi, thank you. I made the below final changes to base.css file:

.product__title h1 {
    font-size: 34px;
}

@media only screen and (max-width: 749px) {
.product__title h1 {
    font-size: 26px;
}
}

I had to add additional code to control the mobile view.

Thanks for your help today, it’s appreciated. :blush:

1 Like
10

p.s. I noticed that it does not affect the product snippet I have on the home page. Do you know which file I’ll need to edit to ensure the change affects the home page?

Thanks again!

11

go to → section-main-product.css and paste this code

.product__title > * {
font-size:10px;
}

12

Hi @mrtkmk

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.product .product__title h1 {font-size: 24px !important;}

Regards,

San

13

It worked the first time but when I change the theme, it doesn’t work anymore.

14

Hello @E-macht

Please provide us proper URL so that we can check and provide a solutions.