Looking to change the afterpay logo on my product page

Store Design

Topic summary

A Shopify store owner wants to customize the Afterpay logo on their product page to black and white instead of the default colored version, as it doesn’t match their theme aesthetic. They also want to make the payment messaging text uppercase.

Technical Solution Provided:

  • Add CSS filter to convert the logo to grayscale: .afterpay-logo{filter:grayscale(1);}
  • Add text transformation for uppercase styling: .afterpay-paragraph{text-transform:uppercase; letter-spacing:2em;}
  • Both code snippets should be added to the end of the theme.css file

Context:

  • The user manually added Afterpay’s preset code to their theme.liquid file since the Afterpay app isn’t available in Canada
  • A working example was shared showing the customized black and white logo
  • Another user joined asking how to implement the same changes, indicating this is a common customization need
Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I got the Shopify blurb installed on my product page but would like to change the icon to black and white. It is currently colored and I feel it doesn’t go well with my theme. If I can get help making it all caps too that would be amazing !!! Please help my coding wizards. Thanks in advance!

Screen Shot 2022-01-08 at 10.45.35 AM.png
Screen Shot 2022-01-08 at 10.45.35 AM.png468×142 6.64 KB

2

@Claud123 - I think you added the code and then it started to show under products right? can you please share this page link? I can check CSS

3

Hello!

Yes I just took the code afterpay has preset on their website (for product page display) and added it to theme.liquid under the layout section. Here is a photo of what the preset code looks like and I also attached the afterpay page I followed. The afterpay apps is not available in Canada and I just want the logo to look black and white and the text for the 4 easy payment blurb uppercase if possible.

Thank you!

https://developers.afterpay.com/afterpay-online/docs/shopify-site-messaging

Screen Shot 2022-01-08 at 11.03.22 AM.png
Screen Shot 2022-01-08 at 11.03.22 AM.png1115×389 93.3 KB

4

@Claud123 - can you please share the page link where you have this afterpay logo?

5

here it is:

https://elevationathleticsyyc.ca/products/5-45lb-value-plate-set

Thank you in advance!

6

@Claud123 - please add this css and check, should look like screenshot below

.afterpay-logo{filter: grayscale(1);}

suyash1_0-1641872431735.png
suyash1_0-1641872431735.png1366×768 175 KB

7

thank you so much for the help. Where would I go to get it to change to look like this after I enter the edit code section. Also if I wanted to make it all caps like the rest of the titles on the product page how could I do so?

Thank You!

8

@Claud123 - please add it to the very end of theme.css file, also please add this code for text

.afterpay-paragraph {
    text-transform: uppercase;
    letter-spacing: .2em;
}
9

Here is the link! Thanks for your help!

https://elevationathleticsyyc.ca/products/olympic-steel-weight-plate-pairs

10

Hi there,

Im trying to do the same, where do you paste the code? I did as attached but not change.