Footer dawn theme payment icons

[Jannesw]

Hello,

is it  possible to place the payment icons under the "We Accept" heading?

[BSSCommerce-B2B · 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:

[topnewyork]

Hi @Jannesw , can you kindly share your store URL please.

Thanks!

[Jannesw]

HI, url is
https://unykplankje.nl/password

password: ynes123

[dws_pvt_ltd]

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.

[Jannesw]

thanks but i meant more like in this photo

[topnewyork]

Do you mean like this?

[Jannesw]

yes and then 4 icons wide and then the next one below

[BSSCommerce-B2B]

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

[BSSCommerce-B2B · 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:

[Jannesw]

Tankyou very Much it works 🙂

[Jannesw]

it is also possible to get a mail icon next to email ons?

[BSSCommerce-B2B · 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: