Footer dawn theme payment icons

Solved

Footer dawn theme payment icons

Jannesw
Tourist
6 0 1

 

Hello,

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

 

footer.png

Accepted Solutions (2)
BSSCommerce-B2B
Shopify Partner
1727 515 579

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:

BSSCommerceB2B_0-1725543741977.png

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

View solution in original post

BSSCommerce-B2B
Shopify Partner
1727 515 579

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:

BSSCommerceB2B_0-1725548271861.png

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

View solution in original post

Replies 11 (11)

topnewyork
Globetrotter
633 114 134

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

Thanks!

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Jannesw
Tourist
6 0 1

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

password: ynes123

dws_pvt_ltd
Shopify Partner
330 65 92

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>

 

dws_pvt_ltd_0-1725542432746.png

 

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: [email protected].
For more information visit our website Dolphin Web Solution Pvt Ltd.
Jannesw
Tourist
6 0 1

thanks but i meant more like in this photo

 

footer.png

topnewyork
Globetrotter
633 114 134

Do you mean like this?

topnewyork_0-1725543054873.png

 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Jannesw
Tourist
6 0 1

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

BSSCommerce-B2B
Shopify Partner
1727 515 579

@Jannesw ,
Step 1:
 Go to Admin -> Online store -> Theme > Edit code

BSSCommerceB2B_0-1725542966736.png

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:

BSSCommerceB2B_1-1725543304090.png

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

BSSCommerce-B2B
Shopify Partner
1727 515 579

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:

BSSCommerceB2B_0-1725543741977.png

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

Jannesw
Tourist
6 0 1

Tankyou very Much it works 🙂

Jannesw
Tourist
6 0 1

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

BSSCommerce-B2B
Shopify Partner
1727 515 579

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:

BSSCommerceB2B_0-1725548271861.png

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