How to reduce Shop Pay text size on product pages

Store Design
1

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

Screen Shot 2021-09-27 at 3.16.04 PM.png
Screen Shot 2021-09-27 at 3.16.04 PM.png922×988 44.2 KB

2

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!

2 Likes
3

Awesome, that worked - thanks!

4

Perfect, Cheers!

5

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.

1 Like
6

if you can’t target it anymore, like i had the issue with the new version of the terms, you can select the previous

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

This was perfect! Thanks for the code.

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

1 Like
8

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

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