Adding Custom Payment Icon to Footer and under Buy Button

Solved

Adding Custom Payment Icon to Footer and under Buy Button

manoman
Pathfinder
126 1 21

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!

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
2350 688 806

This is an 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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 6 (6)

BSS-TekLabs
Shopify Partner
2350 688 806

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
manoman
Pathfinder
126 1 21

I have sent you a PM for it! Thanks!

BSS-TekLabs
Shopify Partner
2350 688 806

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

This is an 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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
manoman
Pathfinder
126 1 21

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

BSS-TekLabs
Shopify Partner
2350 688 806

Glad to help you. Have a good day.

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now