Jump to content

Editing Afterpay text font and spacing?

Recommended Posts

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

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.