Making Add to cart and Buy it now button in Product info appear in the same line (Pic included)

Store Design
1

Screenshot_1.png
Screenshot_1.png730×211 2.36 KB

Hi, I want to change the layout such that the buttons appear like the ones I drew on the right. I am using Dawn theme, website url is https://healinghome.co.in/

Thank you.

2

Hi @aryaman2

Please add this code in your css file

now it’s look like this https://prnt.sc/OIR0ffspO6jp

.product-form__buttons{
display:flex;
}
.product-form__submit{
widht:50%;
margin-right: 30px;
}
.shopify-payment-button{
widht:50%}
3

@aryaman2

Please add the following CSS code to your assets/base.css bottom of the file.

.product-form__buttons{
display:flex !important;
}
.product-form__submit{
widht:50% !important;
margin-right: 30px !important;
}
.shopify-payment-button{widht:50%!important;}

Thanks!

4

Hi @aryaman2 ,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please add the below CSS in your theme.css file.

.product-form__buttons {
    max-width: initial;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.product-form__buttons .button--full-width {
    display: flex;
    width: 48%;
    margin-right: 18px;
}
.product-form__buttons .shopify-payment-button {
    width: 48%;
}

If its working then, please do not forget to accept this solution :slightly_smiling_face:

Thanks & Regards,
Prezen Tech

5

@aryaman2

Add this code at the bottom of Theme > Edit code > assets > base.css file

@media (min-width: 768px) {
	.product-form__buttons {
		display: flex;
		gap: 5px;
	}
	.shopify-payment-button__button  {
		   width: max-content;
	}
}

Try it and let me know

6

@Prezentech

This works really well.

Thank you