Jump to content

Editing Afterpay text font and spacing?

Go to solution Solved by paul2009,

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

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

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 year later...
3 hours ago, TRDELUX said:

Can I remove the text completely and just keep the afterpay logo?

In answer to your specific question of can you hide just the text, the answer is that you could, but not with CSS. This is because the buttons ('Afterpay' and 'i') are descendents of the same span and would also be hidden). The only way to do this would be to use some JavaScript to remove the text nodes that are descendents of the .afterpayString span, without affecting the button elements.

image.thumb.png.e9e596b89e77e94a40e7206b7562c85e.png                           

That said, can you explain why you want to remove the text but leave the logo in place? Is there an issue with the language or the font? Without knowing the context of your question, it is difficult to know the best approach to solve your issue. If a client asked me to retain the logo without the explanatory text, it isn't something I would advise because it is likely to be more confusing for users (see below).

image.png.520c6f1237393f20b9d64bb38a5abb0a.png

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Hi Paul2009, thanks for the prompt reply. The reason for removing the text is that we sell B2B and website product prices are displayed as excluding tax. Therefore the afterpay calculation over 4 payments is incorrect and misleading. Tax is applied in the cart, where they would then be prompted to pay the correct amount if selecting afterpay payment method.

Link to comment

@paul2009 - I would love to know if you can remove the entire AfterPay string - the wording and the logo - completely. I'd like it to hopefully still appear in the checkout process. But on the product page itself, I'd like to take it out completely. Is this possible? I have a Squarespace business account so using JavaScript to accomplish it would be okay.

Link to comment
  • 1 month later...

Hello, I'm trying to solve the initial issue raised in this forum (the afterpay text overlapping/crowding onto my item price), and I am not very familiar with custom coding. I tried pasting the original solution posted by Paul2009 into both the header injection and the Custom CSS sections and it did not work. Please advise!

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.