How to reduce Shop Pay text size on product pages

Store Design

Topic summary

Reducing the Shop Pay message text size on product pages and/or increasing product price size for better visual flow. A product example link and screenshot illustrate the text size matching the price, which feels disruptive.

Working fix: Add CSS targeting the shopify-payment-terms element with a reduced font size (e.g., 14px with !important). The original poster confirmed this resolves the issue.

Theme 2.0 considerations: If the terms element can’t be directly targeted—or a styles.css file isn’t present—use an adjacent sibling selector (e.g., .product-qty-btn-block + div) to style the div that follows a known block. The “+” selector targets the immediately following sibling.

Responsive sizing: Use a CSS media query to set 10px on mobile and 14px on desktop (e.g., min-width: 770px). Media queries apply styles based on viewport width.

Status: Sizing is resolved with CSS, including a responsive approach. Open items: where to place CSS in Theme 2.0 without styles.css, repositioning the Shop Pay message into its own block, and shortening the message text were asked but not conclusively answered.

Summarized with AI on January 19. AI used: gpt-5.
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;
}
}