How to reduce Shop Pay text size on product pages

[sambatothesea]

How do I reduce the Shop Pay text size on my product pages? It's the same size as the product price and visually doesn't flow well. Or, alternatively, how do I increase the size of the product pricing and keep the Shop Pay text size the same?

Product page example: https://thesunsetshop.com/products/beach-happy

[JHKCreate · Accepted solution]

Hi @sambatothesea 

Try adding the following code to your styles.css file at the end:

shopify-payment-terms {
    font-size: 14px!important;
}

Let me know if that works out for you! Should that be all, we always appreciate a like & mark as answer to let the community find quality answers faster. Thanks!

[sambatothesea]

Awesome, that worked - thanks!

[JHKCreate]

Perfect, Cheers!

[jm-design]

Hi, I noticed that my theme 2.0 theme does not have a styles.css to edit. I have Pipeline 2.0. Could you help me figure out where / how to adjust my shoppay font like this?

Also, and if possible - 1) is there a way just to put it on its own block (maybe custom liquid?) so I can place it in a different area on my product page. 2) is it possiable to shorting the text description as I think I want to keep it simpler.

[ryeung316]

This was perfect! Thanks for the code.

Is there a way to show 14px font on DESKTOP but only 10px font on MOBILE?

[Florian2]

you can probably find that one in Google 🙂 however this will get you started:

---

@ryeung316 wrote:

This was perfect! Thanks for the code.

Is there a way to show 14px font on DESKTOP but only 10px font on MOBILE?

---

---

@ryeung316 wrote:

This was perfect! Thanks for the code.

Is there a way to show 14px font on DESKTOP but only 10px font on MOBILE?

---

shopify-payment-terms {
    font-size: 10px !important;
}
@media (min-width: 770px) {
shopify-payment-terms {
    font-size: 14px !important;
}
}

[Florian2]

if you can't target it anymore, like i had the issue with the new version of the terms, you can select the previous <div> class name and add +div, which selects the div after the mentioned one. In my case, I used the class for the payment button and added +div like so:

.product-qty-btn-block + div {