All things Shopify and commerce
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!
Solved! Go to the solution
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
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
I have sent you a PM for it! Thanks!
- 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
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
Cant thank you enough brother! You the best, it worked PERFECTLY! Thanks!
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
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024