Jump to content

Add payment icons on Footer

Recommended Posts

Posted

Hello, 

I would like to add payment method icons on the footer of my website. I have try to download images but the quality or the size are not appropriate. Could you please help me ?

Posted
On 9/2/2021 at 7:43 AM, MorganePinet said:

Hello, 

I would like to add payment method icons on the footer of my website. I have try to download images but the quality or the size are not appropriate. Could you please help me ?

Can you share link to your site?

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

Posted
On 9/10/2021 at 12:00 PM, MorganePinet said:

Hello, 

Please find attached the link of my website.  https://www.mademoisellemorgane.com.au/

I would like to add Mastercard/VISA/STRIPE/APPLE PAY/AFTER PAY. 

Thank you for your help !

Add it under Easy Weddings or under Copyright text? I guess you can add an Image Block >> Add payment icon??

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

Posted

I'm attempting to address this issue but it is slow going. I want to only use SVGs that are official from each payment processor. All the ones you mentioned do provide their logos and such in various SVGs. The SVGs although fantastic for looking good at various sizes, do require some processing to whip into shape to work in this potential effect.

Then there is the issue with all the images having different height/width ratios and trying to get them to look balanced in a row grid.

So far I'm encouraged but I don't know if this will turn into a solution.

1516160874_ScreenShot2021-09-14at12_37_36AM.png.d7c419bf833d655082effd031bfb630c.png

I'll update if there is progress.

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.

  • 4 months later...
Posted

I have updated the code cited in my September 17, 2021 post.

From the changes log.

  • added support for --justify-content CSS variable, default is center
  • added support for PayPal
  • added support for Clearpay
  • added Afterpay mint lockup
  • removed unneeded class attributes
  • removed redundant id attributes

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.

  • 4 months later...
Posted (edited)

Hey @creedon I have been trying to add this to my site but the icons appear very large.

How do I set them so they appear neatly in the footer? I have deleted the images I do not want to show. 

If possible I would like them in 1 line.

Screenshot 2022-06-28 at 17.19.13.png

Edited by Stevey1919
add content
Posted
1 hour ago, Stevey1919 said:

I have been trying to add this to my site but the icons appear very large.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

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.

Posted
1 hour ago, Stevey1919 said:

I have been trying to add this to my site but the icons appear very large.

It appears you've not installed the CSS from the first step of the Quick Install instructions.

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.

Posted
5 minutes ago, Stevey1919 said:

I have tried adding the CSS but it does not do anything other than change the font of my quote at the bottom of the page.

When I install the CSS locally here this is what I see.

1113846845_ScreenShot2022-06-28at11_30_34AM.thumb.png.976fc3be46bcb4219cb98ad6646de678.png

The CSS needs to go in Settings > Advanced > Code Injection > HEADER not Design > Custom CSS.

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.

  • 3 months later...
Posted

I have updated the code cited in my September 17, 2021 post.

Added American Express icons.

Reworked configuration code, now uses LESS. It's still code but hopefully it's not as mind numbing as before with endless lines of long CSS variable names.

If you don't need the AE icons there is no need to upgrade your current installation until you do.

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.

  • 1 month later...
  • 2 weeks later...
Posted

Hi, I've been trying all day to add these payment icon codes but seems like my CSS screen isn't responding at all. Ive tried re starting and all that. Is anyone able to help me?

  • 1 year later...
  • 6 months later...
Posted

Hey @creedon! I was looking at the different payment options. Do you have icons for Discover and Link by Squarespace? Also, when adding the code to my site it doesn't show anything. Just the numbers. I'm assuming I'm doing something wrong. You can see that at woodcandleconew.squarespace.com/new-page

Website: woodcandleconew.squarespace.com

Thanks in advance!

Posted
8 hours ago, WoodCandleCo said:

Do you have icons for Discover and Link by Squarespace?

No. Unfortunately Discover and Link by Squarespace do not appear to provide official SVG files for those icons.

Quote

Also, when adding the code to my site it doesn't show anything. Just the numbers. I'm assuming I'm doing something wrong.

It appears you have not done step 2 of the install instructions.

Quote

Add code from file payment processor icons svg symbol.html to Website > Pages > Website Tools > Code Injection > FOOTER.

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.

Posted
8 hours ago, creedon said:

No. Unfortunately Discover and Link by Squarespace do not appear to provide official SVG files for those icons.

Thanks! Looks like it's working.

 

I did some digging on those logos as well. I see Discover has an AI and EPS of their logos on their site. I'd be happy to export as SVG for you? Also stumbled on the Link logo files from their site. Link: https://brandfolder.com/s/pvwp4pxn58tn38n6hfpjfnm

All of Stripe's media assets: https://stripe.com/newsroom/information

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.