Re: Add this image below payment methods

Add this image below payment methods

NinoB97
Explorer
63 0 26

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

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

 

 

 

Screenshot 2024-08-07 033531.png

Replies 10 (10)

PageFly-Richard
Shopify Partner
4731 1078 1743

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

NinoB97
Explorer
63 0 26

no doesnt show it

PageFly-Richard
Shopify Partner
4731 1078 1743

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

PageFlyRichard_0-1723078334820.png

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.

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

NinoB97
Explorer
63 0 26

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

BSSCommerce-B2B
Shopify Partner
1954 562 561

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

BSSCommerceB2B_0-1723078137460.png

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

 

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

NinoB97
Explorer
63 0 26

@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
Shopify Partner
1954 562 561

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.

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

NinoB97
Explorer
63 0 26

@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
Shopify Partner
1954 562 561

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

BSSCommerceB2B_0-1723176416735.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

NinoB97
Explorer
63 0 26

Doesnt do anything man