Make the quantity selector and add to cart button on the same row

Store Design
1

hi, how can i make the quantity selector and add to cart button on the same row (like the imade below). i want to do this ONLY for the product page - DAWN THEME 6.0.2

ni3_0-1669606732974.png

url: nightlightcity.com

pass: bowchu

thanks heaps

2

@ni3

Hello

{% if template contains 'product' -%}

{% endif %}

Add this css at the bottom of Online Store->Theme->Edit code->theme.liquid Before

oscprofessional_0-1669617094969.png
oscprofessional_0-1669617094969.png1801×672 162 KB

3

@ni3
Hello,

.product-form__input.product-form__quantity {
	float: left;
	width: 20%;
}
.product-form {
	float: right;
	width: 70%;
	margin-top: 24px !important;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Like This

oscprofessional_0-1669618206984.png
oscprofessional_0-1669618206984.png1535×860 192 KB

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.product-form__input.product-form__quantity {
float: left !important;
margin-right: 2rem !important;
}
.product__info-container .product-form {
margin: 3.6rem 0 !important;
}
product-form.product-form {
display: flow-root !important;
}

Screenshot :- https://prnt.sc/Mcapc0JSrE3j

5

Hey there,

I know it’s been a while since you posted this, but any chance you could tweak this code so that only add to cart button (not the dynamic payment button) is put inline with quantity selector?

Many thanks in advance.

Best,

Al