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
We 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, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024