ShuiFeng Posted May 29, 2023 Share Posted May 29, 2023 Hi all, Is it possible to replace the footer on only the cart page? I'd like to display some payment processor icons but only during the purchasing process. Is there another way of accomplishing this that I'm not aware of? Site: shuifeng.squarespace.com Thanks. Link to comment
paul2009 Posted May 29, 2023 Share Posted May 29, 2023 9 minutes ago, ShuiFeng said: Is it possible to replace the footer on only the cart page? The cart page is generated automatically - there isn't a page you can edit. To do this easily (without requiring Javascript to manually create the elements and add them to the cart page when it appears) you'll probably want to add the icons to your site footer, and then hide the icons on other pages using CSS. Did this help? Please give feedback by clicking an icon below ⬇️ ShuiFeng and e2astudio 2 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
e2astudio Posted May 29, 2023 Share Posted May 29, 2023 @paul2009 is correct. You could add your payment icons using a code block so you can add a class to the icons wrapper element. Then hide it everywhere except the cart with a custom CSS snippet like this: /* cart id not target */ body:not(#cart) .payment-icons { display: none; } Link to comment
creedon Posted May 29, 2023 Share Posted May 29, 2023 Please see the following if you need a set of payment processor icons. Check that it contains the icons you need. You should be able to do as @e2astudio suggests and hide the icons for all but the cart page. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ShuiFeng Posted May 29, 2023 Author Share Posted May 29, 2023 This is all very helpful, thank you guys! I'm a bit stuck at the beginning though. @e2astudio how do I add images via a code block - I'm coming up empty in my searches? I uploaded the image I want to use to the Gallery, but how do I get its web address in order to insert it into the code block? Can the image be linked from the Gallery or do I have to host it externally? ...then how do I assign that image a class? Thanks Link to comment
e2astudio Posted May 29, 2023 Share Posted May 29, 2023 7 minutes ago, ShuiFeng said: I'm a bit stuck at the beginning though. I see. I misunderstood - I thought you already had that figured, just needed help to show only on cart. It will take some custom code to complete using .svg icons. You can't do it with a traditional image from a gallery. Link to comment
ShuiFeng Posted May 29, 2023 Author Share Posted May 29, 2023 I used a standard image (.png), and found the image location (hosted on Squarespace's CDN) with Developer Tools in Chrome. It's possible to do it that way though right? Thanks. Link to comment
creedon Posted May 29, 2023 Share Posted May 29, 2023 Quote I used a standard image (.png), and found the image location (hosted on Squarespace's CDN) with Developer Tools in Chrome. It's possible to do it that way though right? You can do it this way. I don't have a solution using this method though. I prefer to use SVGs, which my code does, as they tend to look better at smaller sizes than images. But again, my code is only good if it has all the payment processors you need to display. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Solution e2astudio Posted May 29, 2023 Solution Share Posted May 29, 2023 (edited) You can, but there's no easy way to hide it when it's placed using Fluid Engine. Instead, place the image in a Code Block wrapped in a `<div>` - something like this: <div class="payment-icons" style="text-align:center;"> <img src="https://images.squarespace-cdn.com/content/v1/627082fb22c34f331451d6b6/edb21702-9537-470f-a4a5-e349ea0d099c/Payment+Processor+Icons+1.png"> </div> Then, with that Custom CSS snippet above, you should be okay to go. Edited May 30, 2023 by e2astudio accuracy Link to comment
ShuiFeng Posted May 30, 2023 Author Share Posted May 30, 2023 (edited) Ok, I've done as suggested and placed the code below into a code block in the footer but it doesn't display the image at all. What am I missing? (the image currently displayed is just the static image I uploaded, the blank space above it is where I placed the code block) EDIT: I got it. I removed the "data" from <img data-src="https://..." and the image is now displayed. Works great! Thank you! I just have to adjust the padding and remove the box shadow and it'll be perfect. <div class="payment-icons" style="text-align:center;"> <img data-src="https://images.squarespace-cdn.com/content/v1/627082fb22c34f331451d6b6/edb21702-9537-470f-a4a5-e349ea0d099c/Payment+Processor+Icons+1.png"> </div> Edited May 30, 2023 by ShuiFeng Link to comment
e2astudio Posted May 30, 2023 Share Posted May 30, 2023 Whoops, my error - I corrected my post too. Change `data-src` to just `src` Link to comment
ShuiFeng Posted May 30, 2023 Author Share Posted May 30, 2023 (edited) lol, thanks! I got it, same time. Thanks so much for your help, it works beautifully. Just have to make a few adjustments to padding and I'm good to go. Edited May 30, 2023 by ShuiFeng Link to comment
ShuiFeng Posted May 30, 2023 Author Share Posted May 30, 2023 @creedon Thanks so much for your input - I was able to get the .png working but if I have issues with the .png image quality I'm going to try your route with the .svg. Thanks for creating that resource - creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment