Increase size of the text on the Buy Button (just the text)

Store Design
1

Hello, I recently managed to increase the size of my product page’s buy button, but now the text on it is pretty small.

Does anybody know a code to increase just the text?

Thank you!

1 Like
2

@Masaru

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@Masaru Please share your store URL and password(If it is password protected.). So that I can check and give you the exact solution.

4

Hi @Masaru ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

5

https://meritts-jp.com/products/300ml-portable-car-air-humidifier-usb-essential-oil-diffuser-cool-mist-maker-purifier-car-home-office-ultrasonic-humidifier

The text I want to increase the size is カートに追加

6

https://meritts-jp.com/products/300ml-portable-car-air-humidifier-usb-essential-oil-diffuser-cool-mi…

The text I want to increase the size is カートに追加

7

Any solution?

8

Any solution?

1 Like
9

@Masaru

sorry

KetanKumar_0-1648891887609.png
KetanKumar_0-1648891887609.png1920×1080 159 KB

10

It should be ok now!

1 Like
11

Hi @Masaru ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.product-form__cart-submit {
   font-size: 20px !important;
}

NOTE: You can change value 20px to match your theme.

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

12

@Masaru

great thanks can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file.
button.btn.product-form__cart-submit {
    font-size: 24px; /* change value as you like */
}
13

I pasted, but nothing happened…

Screenshot_6.png
Screenshot_6.png926×691 21.1 KB

Screenshot_5.png
Screenshot_5.png904×621 18.5 KB

14

Nothing changed…

Screenshot_4.png
Screenshot_4.png944×568 15.7 KB

15

Hey! I actually added

.product-form__cart-submit { font-size: 16px !important; }

to my theme.liquid file and it worked!

Could you tell me the difference between .liquid and .css?

How do I know if I have to add a code in the .liquid or .css?

1 Like
16

@Masaru

thanks for update

17

Hi @Masaru ,

Usually on 1 site. You add code in liquid, it will take precedence when you add the css. But in case you add more levels of css, then the css file will be given priority, For example, you can add the below css on the theme.css file, it will be given priority.

.product-form__item .product-form__cart-submit {
   font-size: 20px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.