Add this image below payment methods

Store Design
, , ,

Topic summary

A user seeks help adding an image below payment method icons on their Shopify product pages. They provide example URLs showing where the image should appear.

Initial Attempts:

  • PageFly-Richard suggests checking if the theme editor has a built-in option for this feature
  • When no native option exists, they offer to provide custom code

Technical Solutions Provided:
BSSCommerce-B2B provides JavaScript code to be added to the theme’s global.js file. The code:

  • Creates a new div element with centered styling
  • Inserts an image below payment icons
  • Uses CSS selectors to target the payment icons area

Troubleshooting:
The solution requires multiple iterations due to:

  • CSS selector changes on the site (from .payment-icons to .list.list-payment)
  • The code includes a polling mechanism to wait for page elements to load
  • User confirms adding code to global.js but reports it’s still not displaying

Current Status:
The discussion remains unresolved. Despite three code revisions adjusting for different CSS selectors, the user reports the image still doesn’t appear. The issue may involve selector accuracy, code placement, or theme-specific conflicts.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
10

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
BSSCommerceB2B_0-1723176416735.png1307×960 187 KB