Shopify themes, liquid, logos, and UX
is it possible to place the payment icons under the "We Accept" heading?
Solved! Go to the solution
This is an accepted solution.
@Jannesw , if you want 4 icons in a row change the code like this
<style>
.list-payment{
max-width: 220px;
justify-content: flex-start
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const weAcceptBlock = document.querySelector('.footer__blocks-wrapper.animate--slide-in > div:nth-child(3)');
const paymentElement = document.querySelector('.footer__payment');
paymentElement.style.display = "flex"
paymentElement.style.alignItems = "flex-start"
if (weAcceptBlock ) {
weAcceptBlock.appendChild(paymentElement);
}
});
</script>
Result:
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
This is an accepted solution.
@Jannesw, chane the previous code like this
<style>
.list-payment{
max-width: 220px;
justify-content: flex-start;
}
.footer-email-icon {
position: relative
}
.footer-email-icon > svg {
position: absolute;
top: 0px;
left: 2px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const emailBlock = document.querySelector('footer .footer-block:nth-child(2) .footer-block__details-content p');
const emailIcon = document.createElement('span');
emailIcon.innerHTML = '<svg data-name="1-Email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="28" height="20"><path d="M29 4H3a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h26a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-.72 2L16 14.77 3.72 6zM30 25a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.23l13.42 9.58a1 1 0 0 0 1.16 0L30 7.23z"/></svg>';
emailIcon.classList.add(".footer-email-icon")
const weAcceptBlock = document.querySelector('.footer__blocks-wrapper.animate--slide-in > div:nth-child(3)');
const paymentElement = document.querySelector('.footer__payment');
paymentElement.style.display = "flex"
paymentElement.style.alignItems = "flex-start"
if (weAcceptBlock ) {
weAcceptBlock.appendChild(paymentElement);
}
if (emailBlock) {
emailBlock.appendChild(emailIcon);
}
});
</script>
Result:
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Hi @Jannesw , can you kindly share your store URL please.
Thanks!
Hello @Jannesw, Go to online store -> Open Edit code -> Open "footer.liquid" section file.
search this class "footer__payment" and add the content below of it,
<span class="footer-payment-heading">We Accept</span>
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
thanks but i meant more like in this photo
Do you mean like this?
yes and then 4 icons wide and then the next one below
@Jannesw ,
Step 1: Go to Admin -> Online store -> Theme > Edit code
Step 2: Find the file theme.liquid
Step 3: Paste the below code before </body> on theme.liquid
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const weAcceptBlock = document.querySelector('.footer__blocks-wrapper.animate--slide-in > div:nth-child(3)');
const paymentElement = document.querySelector('.footer__payment');
paymentElement.style.display = "flex"
paymentElement.style.alignItems = "flex-start"
if (weAcceptBlock ) {
weAcceptBlock.appendChild(paymentElement);
}
});
</script>
Result:
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
This is an accepted solution.
@Jannesw , if you want 4 icons in a row change the code like this
<style>
.list-payment{
max-width: 220px;
justify-content: flex-start
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const weAcceptBlock = document.querySelector('.footer__blocks-wrapper.animate--slide-in > div:nth-child(3)');
const paymentElement = document.querySelector('.footer__payment');
paymentElement.style.display = "flex"
paymentElement.style.alignItems = "flex-start"
if (weAcceptBlock ) {
weAcceptBlock.appendChild(paymentElement);
}
});
</script>
Result:
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Tankyou very Much it works 🙂
it is also possible to get a mail icon next to email ons?
This is an accepted solution.
@Jannesw, chane the previous code like this
<style>
.list-payment{
max-width: 220px;
justify-content: flex-start;
}
.footer-email-icon {
position: relative
}
.footer-email-icon > svg {
position: absolute;
top: 0px;
left: 2px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const emailBlock = document.querySelector('footer .footer-block:nth-child(2) .footer-block__details-content p');
const emailIcon = document.createElement('span');
emailIcon.innerHTML = '<svg data-name="1-Email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="28" height="20"><path d="M29 4H3a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h26a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-.72 2L16 14.77 3.72 6zM30 25a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.23l13.42 9.58a1 1 0 0 0 1.16 0L30 7.23z"/></svg>';
emailIcon.classList.add(".footer-email-icon")
const weAcceptBlock = document.querySelector('.footer__blocks-wrapper.animate--slide-in > div:nth-child(3)');
const paymentElement = document.querySelector('.footer__payment');
paymentElement.style.display = "flex"
paymentElement.style.alignItems = "flex-start"
if (weAcceptBlock ) {
weAcceptBlock.appendChild(paymentElement);
}
if (emailBlock) {
emailBlock.appendChild(emailIcon);
}
});
</script>
Result:
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025