How to attach order bumps to specific products

Here is an example of what we are trying to make: attach-product-list-to-Order-Bump

You have to go to Custom Codes > Body HTML and paste the following script:

const ATTACHED_OB_CLASS = 'attached-ob-';
let products = document.querySelectorAll('.product-list [name="product-id"]')
let productsMap = {};
products.forEach((p, i) => {
    let obClass = ATTACHED_OB_CLASS + (i+1);

    productsMap[p.value] = obClass;

    p.addEventListener('input', () => {

function updateAttachedOb() {
    let pInput = document.querySelector('.product-list [name="product-id"]:checked');
    let obs = document.querySelectorAll(`[class*="${ATTACHED_OB_CLASS}"]`)
    let obClass = productsMap[pInput.value];

        let obInput = ob.querySelector('input[name="product-id"]')
        obInput.checked = false;
        obInput.dispatchEvent(new Event('change'));

    let ob = document.querySelector(`.order-bump.${obClass}`)
    if (ob){
        let obInput = ob.querySelector('input[name="product-id"]')
        obInput.checked = true;
        obInput.dispatchEvent(new Event('change'));



Finnaly Create your order bumps and then:

  • Select each order bump, and then go to Advanced and set CSS Classes to attached-ob-{N}

  • The number N is the associated product index starting from 1.

  • So this way, the order bump to associate with the first product 1x, should have this CSS Class value: attached-ob-1 and second order bump will have attached-ob-2 and so on…

  • There is no need to modify the code any further.

Let us know how it goes,

Fey @Funnelish.