Editing Afterpay text font and spacing?

Would anyone know how to edit Afterpay's text and spacing that reads: "or 4 interest-free payments of $34.50 with [Afterpay's logo]."  I understand the logo can't be changed. 

The text is right below the price of my item, without proper space and the font weight and type is an eye sore with the fonts that I use.  I've already reached out to Squarespace, and it was forwarded as suggestion to their development team, but in the meantime, I'm hoping there's a workaround someone knows? 

Looking to make it look more like this:

https://www.anthropologie.com/shop/smocked-ruffled-mini-dress?category=dresses&color=001&type=STANDARD&quantity=1

6 hours ago, Rit said:

Would anyone know how to edit Afterpay's text and spacing that reads: "or 4 interest-free payments of $34.50 with [Afterpay's logo]."  I understand the logo can't be changed. 

The text is right below the price of my item, without proper space and the font weight and type is an eye sore with the fonts that I use.  I've already reached out to Squarespace, and it was forwarded as suggestion to their development team, but in the meantime, I'm hoping there's a workaround someone knows? 

Looking to make it look more like this:

https://www.anthropologie.com/shop/smocked-ruffled-mini-dress?category=dresses&color=001&type=STANDARD&quantity=1

Can you share link to your site? We can check easier

Sure, thank you.

https://abeautifulprojection.com/shop/p/palette

On 10/20/2021 at 6:26 PM, Rit said:

Sure, thank you.

https://abeautifulprojection.com/shop/p/palette

 

Add to Design > Custom CSS

/* Afterpay text */
span.afterpayString {
    font-size: 20px;
}
[data-afterpay="true"] {
    margin-top: 40px !important;
}

The margin above the AfterPay messaging is set to minus 22 pixels by default, placing it tight against the pricing. Reducing this to something like -10px will add some space.

The AfterPay messaging uses 'browser safe' fonts by default (Helvetica Neue, Helvetica, Arial, sans-serif) but these can be customised easily to a font-family you are using on the site, for example Brandon Grotesque. Optionally you can also adjust the font weight and the letter spacing to get the look that you want.

The AfterPay messaging uses the class '_2NN0IlogY' on the product page and the class '_3Dgr8g-LT' on the cart page, so if you want to change it in both places, you'll need to use both, For example, using the following CSS you can set independent settings for each page type:

/* Afterpay messaging on product page */
._2NN0IlogY {
  margin-top: -10px;
  font-weight: 300;
  font-family: 'brandon-grotesque';
  letter-spacing: 1px;
}
/* Afterpay messaging on cart page */
._3Dgr8g-LT {
  font-weight: 300!important;
  font-family: 'brandon-grotesque'!important;
  letter-spacing: 1px!important;
}

Notes:

1. This solution is CSS. Add to Design > Custom CSS.
2. CSS changes to the cart are not immediate. You will need to refresh your browser for these to be visible.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️