Add this image below payment methods

[NinoB97]

How do i add these imaging below my payment methods, example:

https://mauro-milan.nl/collections/bestsellers/products/milan-trousers-donkerblauw

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @NinoB97 Please check again your editor theme have provide option add image below method payment ? If not we need add code in your footer theme.
Please check again and tell me , if need I will send you this code.

Thanks you,

Best regards,

Richard | PageFly

[NinoB97]

no doesnt show it

[PageFly-Richard]

@NinoB97  Please add code in your theme like image here:

This is code show image:

    <div class="logo-container img_footer">
      <img src="https://st2.depositphotos.com/4035913/6124/i/950/depositphotos_61243733-stock-illustration-business-company-logo.jpg" alt="Logo" class="logo" alt="" />
    </div>
      <style>
        .logo-container {
          
          height: 300px;
          display: flex;
          width: 100%;
          justify-content: center;
          align-items: center;
        }
        
        .logo {
          max-width: 100%;
          max-height: 300px;
          object-fit: contain;
        }
      </style>

Thanks you.

[NinoB97]

@BSSCommerce-HDL @BSSCommerce-B2B can one of u guys help me with this ?

[BSSCommerce-B2B]

Hi @NinoB97

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.js or global.js. Search for the following CSS snippet

document.addEventListener('DOMContentLoaded', function() {
    // Create a new div element
    var newDiv = document.createElement('div');
    newDiv.style.display = 'flex';
    newDiv.style.justifyContent = 'center';
    newDiv.style.marginTop = '20px';
    newDiv.style.marginBottom = '20px';

    // Create a new image element
    var newImg = document.createElement('img');
    newImg.src='https://cdn.shopify.com/s/files/1/0787/4369/9783/files/Tekst_zonder_schaduw.png?v=1720644560';
    newImg.alt = 'Product Image';
    newImg.style.width = '300px';
    newImg.style.height = 'auto';

    // Append the image to the div
    newDiv.appendChild(newImg);

    // Find the element with the class "payment-icons"
    var paymentIcons = document.querySelector('.payment-icons');

    // Insert the new div after the "payment-icons" element
    if (paymentIcons) {
        paymentIcons.parentNode.insertBefore(newDiv, paymentIcons.nextSibling);
    }
});

The result

If it helps you, please like and mark it as the solution.

[NinoB97]

@BSSCommerce-B2Bmaybe i did something wrong but that didn't work, please remember its for this site: https://auraliving.nl/products/flame-aroma-diffuser-deluxe-1

[BSSCommerce-B2B]

please change to it

const loop = setInterval(() => {
    if(document.querySelector('.payment-icons')) {
        clearInterval(loop)
        addIcon()
    }
}, 100)

setTimeout(() => {
clearInterval(loop)
}, 10000)

function addIcon() {
    // Create a new div element
    var newDiv = document.createElement('div');
    newDiv.style.display = 'flex';
    newDiv.style.justifyContent = 'center';
    newDiv.style.marginTop = '20px';
    newDiv.style.marginBottom = '20px';

    // Create a new image element
    var newImg = document.createElement('img');
    newImg.src='https://cdn.shopify.com/s/files/1/0787/4369/9783/files/Tekst_zonder_schaduw.png?v=1720644560';
    newImg.alt = 'Product Image';
    newImg.style.width = '300px';
    newImg.style.height = 'auto';

    // Append the image to the div
    newDiv.appendChild(newImg);

    // Find the element with the class "payment-icons"
    var paymentIcons = document.querySelector('.payment-icons');

    // Insert the new div after the "payment-icons" element
    if (paymentIcons) {
        paymentIcons.parentNode.insertBefore(newDiv, paymentIcons.nextSibling);
    }
}

Add this JavaScript code at the end of the global.js file.

[NinoB97]

@BSSCommerce-B2Bi added the code u gave me here to the global.js at the bottom of the file and saved it and now its still not showing, anything else i need to do ?

[BSSCommerce-B2B]

Hi @NinoB97  

The selector has been changed; I don’t understand why

Please change to it

const loop = setInterval(() => {
    if(document.querySelector('.list.list-payment')) {
        clearInterval(loop)
        addIcon()
    }
}, 100)

setTimeout(() => {
clearInterval(loop)
}, 10000)

function addIcon() {
    // Create a new div element
    var newDiv = document.createElement('div');
    newDiv.style.display = 'flex';
    newDiv.style.justifyContent = 'center';
    newDiv.style.marginTop = '20px';
    newDiv.style.marginBottom = '20px';

    // Create a new image element
    var newImg = document.createElement('img');
    newImg.src='https://cdn.shopify.com/s/files/1/0787/4369/9783/files/Tekst_zonder_schaduw.png?v=1720644560';
    newImg.alt = 'Product Image';
    newImg.style.width = '300px';
    newImg.style.height = 'auto';

    // Append the image to the div
    newDiv.appendChild(newImg);

    // Find the element with the class "payment-icons"
    var paymentIcons = document.querySelector('.list.list-payment');

    // Insert the new div after the "payment-icons" element
    if (paymentIcons) {
        paymentIcons.parentNode.insertBefore(newDiv, paymentIcons.nextSibling);
    }
}

 The result

[NinoB97]

Doesnt do anything man