Quantity Selector & Add to Cart In Line

Store Design
, ,
1

Hi guys, does anyone know how to get the quantity selector and add to cart in the same line with the buy it now button below both of them? My website is loveurheart.com

image
image744Ă—660 18.6 KB

2 Likes
3

hii @clementgordon

You can place the quantity selector + Add to cart on the same line with a small CSS tweak (works on most Shopify themes.

Go to Online Store → Themes → Edit code → base.css / theme.css** and add:

.product-form__buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.product-form__quantity {
  flex: 0 0 auto;
}

.product-form__submit {
  flex: 1;
}

.shopify-payment-button {
  width: 100%;
  margin-top: 12px;
}

This will:
Put quantity + Add to cart on one line
Keep “Buy it now” full width underneath

If it doesn’t align perfectly, your theme may use slightly different class names let me know your theme and I’ll adjust it

4

Searching the forum may give you an answer – Quantity selector and Add to cart button next to each other (Sense 15.4.1) - #2 by tim_1

Sense uses the same code as Dawn, so that same code should work for you (maybe with minimal changes).

This should produce the look as per screenshot below. Can go into “Custom CSS” of the product info section.

If added elsewhere, may break your frontpage featured product (because it has no quantity)

/* cart-button */
.product__info-wrapper .product-form {
  margin-top: -62px !important;
  display: flex;
  flex-flow: column;
}

.product__info-wrapper .product-form [name="add"].button {
  margin-left: 15rem;
  width: calc(100% - 15rem);
  padding: 0 5px;
  min-width: 0;
}

.product__info-wrapper quantity-input {
  z-index: 1;
}

.product__info-wrapper .product-form__error-message-wrapper,
.product__info-wrapper .customer {
  order: 1;
}

Screenshot 2026-02-14 at 2.57.34 PM
Screenshot 2026-02-14 at 2.57.34 PM1252Ă—617 86.7 KB

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
1 Like
5

Great thanks Tim. Also would you know how to add an image in the product information section like so?

image
image858Ă—746 94.3 KB

6

The simplest could be to add a “Custom liquid” block and paste code like this:

<img src={{ "no-ai.png" | file_img_url: "450x" }} style="width:100%">

Provided image with filename “no-ai.jpg” is uploaded to the Content-> Files…

7

Fantastic that works great Tim. Could you also tell me how to round the corners of the image? Also how do you make the price text larger as I have looked everywhere and tried multiple bits of code and cant seem to find the answer?

8

Can add some CSS to the Custom liquid code:

<img src={{ "no-ai.png" | file_img_url: "450x" }} style="width:100%;border-radius: 20px ">

For price – paste this into “Custom CSS” setting of the product info section:

.price.price--large {
  font-size: 2.5rem;
}
9

Fantastic they both work perfectly. Do you know how to change the font of the price and also could you show me how to bold it?