Align add to cart button

Align add to cart button

Fran06
New Member
10 0 0

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

 

Anyone

 

Fran06_0-1718366177401.jpeg

⬇️

 

Fran06_1-1718366184727.jpeg

 

Replies 10 (10)

suyash1
Shopify Partner
9540 1192 1531

@Fran06 - can you please share this page link?

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Fran06
New Member
10 0 0

Hi it's toutjewellery.co.uk

BSSCommerce-B2B
Shopify Expert
564 112 135

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

BSSCommerceB2B_0-1718417811551.png

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.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Fran06
New Member
10 0 0

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

BSSCommerce-B2B
Shopify Expert
564 112 135

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

BSSCommerceB2B_0-1718499301214.png

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Fran06
New Member
10 0 0

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? Screenshot 2024-06-16 at 11.23.19.png

BSSCommerce-B2B
Shopify Expert
564 112 135

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.

BSSCommerceB2B_0-1718545317961.png

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Fran06
New Member
10 0 0

Hi yes I've tired the new code but this is what it shows on my end, don't know why...Screenshot 2024-06-16 at 16.10.30.png

BSSCommerce-B2B
Shopify Expert
564 112 135

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.

  

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

GTLOfficial
Shopify Expert
250 46 48

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh