How to reduce font size for 3rd party payment vendor

Store Design

Topic summary

A user seeks to reduce the font size of “Atome Payment” text displayed on their Shopify store. Two solutions are proposed involving custom CSS code:

Recommended approach:

  • Navigate to Online Store → Themes → Edit Code
  • Open Asset → component-card.css
  • Add CSS targeting the Atome widget element at the bottom of the file
  • Adjust the font-size value (suggested: 10px !important)

Current status:
The initial code suggestions did not work for the user. A follow-up solution was provided targeting a different CSS selector (.card-information > div:last-child), but no confirmation of success has been posted yet.

Note: The conversation text appears corrupted or reversed in the original posts, making some technical details difficult to verify precisely.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

How to reduce the size of fonts for the line of “Atome Payment”?

KelvinLeow_0-1677578359175.png
KelvinLeow_0-1677578359175.png1759×377 78.5 KB

Web: https://dissy-co.myshopify.com/
Password: Cheolt

2

@KelvinLeow ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-card.css->paste below code at the bottom of the

.odlTiqai.atome-price-divider.atome-widget {
    font-size: 10px !important;
}

Note: you can change the px value to match your store

Hope my answer will help you.

Best regards,

Victor | PageFly

3

@KelvinLeow

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > component-card.css and paste this at the bottom of the file:
.QxhVHLQi.atome-price-divider.atome-widget {
    font-size: 10px !important;
}
4

Hi i’ve tried your code but dont seem to change the size of the fonts. Any other suggestion?

5

@KelvinLeow ,

You can try again with this code below:

.card-information > div:last-child {
    font-size: 10px !important;
}