Adding Accepted payment method in footer

Store Design
1

Hello,

I am using TASTE theme and want to add the Afterpay logo to my accepted payment providers in my footer

image
image1850×452 27.5 KB

It’s is not an option to allow in my shop settings

image
image865×883 34.7 KB

shop URL: https://handshere.com

How can I add this into the CSS?

TIA

1 Like
2

Those are only svg images. If you don’t have it as an available purchase option, you shouldn’t put the logo image on your site.

3

To add the Afterpay logo to your footer in the TASTE theme, the person can upload the logo manually through the theme’s customization options. They can do this by adding the logo image to the footer section in the Theme Editor or by using custom HTML if needed.

A quick guide would be:

  1. Go to Online Store > Themes > Customize.

  2. Navigate to the Footer settings.

  3. Add an Image block or Custom HTML with the Afterpay logo.

If that option isn’t available directly in the settings, you may need to add a little custom code to the footer. Let me know if you’d like help with that!

4

Search first for existing solutions, some are transferable among themes with a little thought.
https://community.shopify.com/search?q=add+payment+method+to+footer

5

I do have it as an available purchase option - that’s why I want it added

6

None of the articles I have looked into have a solution that works for my theme or is completely solved, do you have a link to a specific one?

7

If you go to Edit Code, footer.liquid, you’ll see that those svg icons come directly from the shop’s enabled payment methods..

8

Unfortunately the steps you have laid out don’t work, adding an image block to the footer doesn’t keep it in line with the other payment options.

I have the logo saved as a .svg asset but can’t figure out how to get this asset to appear alongside the other payment options. The footer.liquid references:

{{ ‘component-list-payment.css’ | asset_url | stylesheet_tag }}

When I access component-list-payment.css, this is the code:

.list-payment {

display: flex;

flex-wrap: wrap;

justify-content: center;

margin: -0.5rem 0;

padding-top: 1rem;

padding-left: 0;

}

@media screen and (min-width: 750px) {

.list-payment {

justify-content: flex-end;

margin: -0.5rem;

padding-top: 0;

}

}

.list-payment__item {

align-items: center;

display: flex;

padding: 0.5rem;

}

I just don’t know how to put the .svg asset into here and have it work - is this something you can help with?

9

Yes I can see that, can I add another one via the CSS? Afterpay is not an option to enable within Shopify

10

That’s just the styles, this type of thing requires FILE modification making it an advanced theme customization.
SVG can be done as background-images but there’s always gotchas that way.

There should be a loop of shop.enabled_payment_types or reference to payment_type_svg_tag as a filter etc.
That HTML structure around each type needs to be copied to a version referencing just the wanted SVG’s ; at the beginning or end of the loop if any.

Or just outright replaced with custom code e.g. Payment icons | Shopify Liquid code examples

Or to have it done for you can reach out to me or other service based contributors for customization services.
CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

1 Like
11

Thank you for explaining (I’m still learning how to modify the code)
I’ll add it to the wish list for now :slight_smile:

12

@HH_2023 the payment icon needs to be added to footer by editing the code, if you are familiar with the coding then you can edit footer.liquid code, if you find it difficult then I can do it for you.

13

Hi, @HH_2023
You can try this code by following these steps:

  1. Go to your Shopify Admin → Online Store → Themes
  2. Click Actions → Edit code
  3. Navigate to Assets → find and open theme.css (or similar CSS files)
  4. Add this CSS code at the bottom:
/* Add Afterpay logo to footer payments */
.list.list-payment,
[class*="payment-icons"],
[class*="footer-payment"] {
  position: relative; /* Ensure positioning context */
}

.list.list-payment::after {
  content: '';
  display: inline-block;
  width: 70px; /* Adjust size as needed */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTAwIDMwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMzAiIHJ4PSI0IiBmaWxsPSIjMDBBQUZGIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMiIgZmlsbD0id2hpdGUiPkFGVEFSUEFZPC90ZXh0Pjwvc3ZnPg==');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 5px;
  vertical-align: middle;
}

Result:

image
image1048×402 13.7 KB

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.