Replace footer on cart page only?

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.  

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

@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;
}

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.

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

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.

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. 

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.

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>

Whoops, my error - I corrected my post too.

Change `data-src` to just `src`

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. 

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