Adding Custom Payment Icon to Footer and under Buy Button

[manoman]

Hello!

I want to add a custom payment icon to my footer and under buy button since I have a third party payment gateway provider. If anyone can help me with this would be super appreciated.

I want the site to remain anonymous so if you can help me, please leave a reply here on the thread and I will PM you the site URL and password. I will of course like and accept your solution if you can help!

Thank you so much!

[BSS-TekLabs]

Hello @manoman 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[manoman]

I have sent you a PM for it! Thanks!

[BSS-TekLabs]

- Here is the solution for you @manoman 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find the product-payment-container element
  var paymentContainer = document.querySelector('.shopify-product-form product-payment-container');
  
  if (paymentContainer) {
    // Create a div element to wrap both the text and img
    var wrapperDiv = document.createElement('div');
    wrapperDiv.classList.add('custom-wrapper'); // Add the custom-wrapper class to the new div

    // Create a span element to contain the text
    var textSpan = document.createElement('span');
    textSpan.textContent = 'Säker betalning med Billwave';

    // Create an img element
    var img = document.createElement('img');
    img.src='https://community.shopify.com/c/image/serverpage/image-id/515459i804B7A0F17D318ED/image-size/large?v=v2&px=999'; // Replace with your image URL
    img.alt = 'Your Image Description';
    
    // Add the custom class to the img element
    img.classList.add('payment-custom-img');

    // Append the span and img elements to the wrapper div
    wrapperDiv.appendChild(textSpan); // Add the text first
    wrapperDiv.appendChild(img); // Add the img after

    // Append the wrapper div to the product-payment-container
    paymentContainer.appendChild(wrapperDiv);
  }
});
</script>

[BSS-TekLabs · Accepted solution]

<style>
.custom-wrapper {
  display: flex; /* Use Flexbox */
  align-items: center; /* Align vertically centered */
  margin-top: 10px; /* Top margin (if needed) */
}

.custom-wrapper span {
  margin-right: 10px; /* Space between the text and image */
  font-size: 16px; /* Font size for the text */
}

.custom-wrapper img.payment-custom-img {
    width: auto;
    height: 30px;
}
</style>

And add this code css below code before </head> and press 'Save' to save it

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[manoman]

Cant thank you enough brother! You the best, it worked PERFECTLY! Thanks!

[BSS-TekLabs]

Glad to help you. Have a good day.

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.