Align add to cart button

[Fran06]

Hello, how can I align the add to cart button next to the quantity button( like the second image)?

Anyone

⬇️

[suyash1]

@Fran06 - can you please share this page link?

[Fran06]

Hi it's toutjewellery.co.uk

[BSSCommerce-B2B]

Hi @Fran06 

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

Step 2. Find the base.css file. Add css to the end of the file

.product-form__buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.form .product-form__submit {
    flex: 1 0 55%;
    margin-bottom: 0;
}
.form .price-per-item__container {
    flex: 1 0 20%;
}
.form .shopify-payment-button {
    flex: 1 0 100%;
}

Step 3. Find the global.js file. Add js to the end of the file

(() => {
    if(window.location.pathname.includes("/products/")) {
        let loop = setInterval(() => {
            let quantityBox = $(".price-per-item__container");
            let ATCbtn = $(".form .product-form__submit");
            if(ATCbtn && quantityBox) {
                clearInterval(loop);
                ATCbtn.before(quantityBox);
            }
        }, 100)
        setTimeout(() => {
            if(loop) {
                clearInterval(loop);
            }
        }, 10000)
    }
})()

Result

If this helps you, please like and mark it as a solution. It would be a great motivation for us to continue contributing to the community.

[Fran06]

Hi thanks for your solution. Unfortunately it doesn't work 

[BSSCommerce-B2B]

hi @Fran06 
Thank you for sharing the website URL. I've found that the JavaScript code isn't working on your site because jQuery isn't present. Could you please modify the JavaScript code above to:

(() => {
    if (window.location.pathname.includes("/products/")) {
        let loop = setInterval(() => {
            let quantityBox = document.querySelector(".price-per-item__container");
            let ATCbtn = document.querySelector(".product-form__submit");
            console.log({ quantityBox, ATCbtn });
            if (ATCbtn && quantityBox) {
                clearInterval(loop);
                ATCbtn.parentNode.insertBefore(quantityBox, ATCbtn);
            }
        }, 100);

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

Of course, the CSS segment will remain unchanged

.product-form__buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.form .product-form__submit {
    flex: 1 0 55%;
    margin-bottom: 0;
}
.form .price-per-item__container {
    flex: 1 0 20%;
}
.form .shopify-payment-button {
    flex: 1 0 100%;
}

Here are the results I have tested on your website

Have a nice day

If this helps you, please like and mark it as a solution. It would be a great motivation for us to continue contributing to the community.

[Fran06]

Hi Thank you for the solution! Is it possible to have the purple shoppay button align with the two buttons above like this for desktop? 

[BSSCommerce-B2B]

Oh, have you tried the solution I suggested? It seems the screenshot I shared might have miss the CSS properties. However, the CSS snippet I provided earlier is complete. An example of the CSS for making the 'Shop now' button full width is located here

.form .shopify-payment-button {
    flex: 1 0 100%;
}

I've rechecked the JavaScript and CSS provided above. The final result will look like this on desktop.

If this helps you, please like and mark it as a solution. It would be a great motivation for us to continue contributing to the community.

[Fran06]

Hi yes I've tired the new code but this is what it shows on my end, don't know why...

[BSSCommerce-B2B]

I understand, my friend. Based on the screenshot you shared, I noticed the JavaScript code has run, but the CSS is still missing.

Have you added this CSS snippet to the end of the base.css file yet? If you have and the CSS still hasn't appeared, to ensure the CSS is not overridden by other CSS rules, I suggest adding !important like this:

.product-form__buttons {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.form .product-form__submit {
    flex: 1 0 55% !important;
    margin-bottom: 0 !important;
}
.form .price-per-item__container {
    flex: 1 0 20% !important;
}
.form .shopify-payment-button {
    flex: 1 0 100% !important;
}

Please let me know if everything has improved, wishing you a great day ahead.

[GTLOfficial]

Hello @Fran06 
yes, it is possible but for that, you need to edit a code in "main-product.liquid" file

Please let us know if you need any assistance.

Thanks 
Ritesh