Rit Posted October 20, 2021 Posted October 20, 2021 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
tuanphan Posted October 20, 2021 Posted October 20, 2021 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!)
Rit Posted October 20, 2021 Author Posted October 20, 2021 Sure, thank you. https://abeautifulprojection.com/shop/p/palette
tuanphan Posted October 22, 2021 Posted October 22, 2021 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; } cjarksq 1 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!)
Solution paul2009 Posted October 22, 2021 Solution Posted October 22, 2021 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: This solution is CSS. Add to Design > Custom CSS. 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 ⬇️ tuanphan 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
TRDELUX Posted June 29, 2023 Posted June 29, 2023 Hi, Can I remove the text completely and just keep the afterpay logo? Thanks
tuanphan Posted June 29, 2023 Posted June 29, 2023 2 hours ago, TRDELUX said: Hi, Can I remove the text completely and just keep the afterpay logo? Thanks Can you share link to a product? The links above doesn't exist 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!)
paul2009 Posted June 29, 2023 Posted June 29, 2023 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. 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). Did this help? Please give feedback by clicking an icon below ⬇️ Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
TRDELUX Posted June 29, 2023 Posted June 29, 2023 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.
Mghionis Posted July 3, 2023 Posted July 3, 2023 @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.
lornaerose Posted August 4, 2023 Posted August 4, 2023 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!
cjarksq Posted June 2 Posted June 2 On 10/22/2021 at 7:33 PM, tuanphan said: Add to Design > Custom CSS /* Afterpay text */ span.afterpayString { font-size: 20px; } [data-afterpay="true"] { margin-top: 40px !important; } @tuanphan You almost always have the answer i need, Im your biggest fan tuanphan 1
nobody Posted October 19 Posted October 19 (edited) how do you put the afterpay string below the "add to cart" button instead of below the price? I'm also trying to reduce the size of the Afterpay logo or do "display: hidden; "but that's also not working @tuanphan @paul2009 Edited October 19 by nobody
tuanphan Posted October 20 Posted October 20 @nobody You can share link to a product, 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!)
paul2009 Posted October 20 Posted October 20 13 hours ago, nobody said: how do you put the afterpay string below the "add to cart" button instead of below the price? Can you explain why you want to move it? The placement of the Afterpay logo is deliberate and I don't generally recommend changing this. It is displayed directly below the price to catch the eye of customers whilst they are considering the product price. It's important that they see the total price and the installment breakdown at the same time. This reduces the cognitive load on users and allows the payment schedule to be understood in the context of the total price. Did this help? Please give feedback by clicking an icon below ⬇️ Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
nobody Posted October 21 Posted October 21 On 10/20/2024 at 2:30 AM, tuanphan said: @nobody You can share link to a product, we can check easier here's a link: https://donkaka.com/yogi/p/purple-lightweight-merino-wool-yoga-outfit
nobody Posted October 21 Posted October 21 On 10/20/2024 at 5:15 AM, paul2009 said: Can you explain why you want to move it? The placement of the Afterpay logo is deliberate and I don't generally recommend changing this. It is displayed directly below the price to catch the eye of customers whilst they are considering the product price. It's important that they see the total price and the installment breakdown at the same time. This reduces the cognitive load on users and allows the payment schedule to be understood in the context of the total price. Did this help? Please give feedback by clicking an icon below ⬇️ Because it's ugly and sticks out like a sore thumb.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment