How to change quanity box height on product page in dawn theme?

Store Design
1

Hi there,

I’ve managed to change certain aspects of the quantity box to 40 pixels high in base.css using

.product__info-wrapper .quantity__button {
height: 40px !important;
}
.product__info-wrapper .quantity {
height: 40px !important;

But looks like the quantity input box is stuck at 47 pixels (quantity input is hanging below the minus and plus) and can’t figure out how to change it. I would like it to match the variant selection box above which is at 40px high.

Any help appreciated.

Many thanks

S

Screenshot 2024-06-10 at 23.54.58.png
Screenshot 2024-06-10 at 23.54.58.png1274×722 11.6 KB

Screenshot 2024-06-11 at 00.08.59.png
Screenshot 2024-06-11 at 00.08.59.png1156×582 25.2 KB

1 Like
2

Hi @OBSBP ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to end of file
.product-form__quantity .quantity {
  min-height: 40px;
}
3

@OBSBP - can you please share this product page link?

4

Hello! @OBSBP Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.product__info-wrapper .quantity__input,
.product__info-wrapper .quantity__button {
  max-height: 40px !important;
  min-height: 40px;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

5

Hi @OBSBP

  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__info-wrapper .quantity__button {
height: 40px !important;
}
.product__info-wrapper .quantity {
height: 40px !important;
}
6

Hi EBOOST (and everyone else)

Thanks for the replies and help.

Don’t by any chance know how to change the border colour on the black box to grey like the option box above rgb(204, 204, 204) ?

Many thanks

S

7

Hi,

May I suggest code below:

.product-form__quantity .quantity:after,
.product-form__quantity .quantity:before {
  box-shadow:  0 0 0;
}
.product-form__quantity .quantity {
  border: 1px solid rgb(204, 204, 204);
  min-height: 40px;
}
.product-form__quantity .quantity .quantity__input{
  outline: none;
  box-shadow: 0 0 0;
  height: 38px;
  margin-top: 1px;
}
8

Very good! Perfect!

Thank you so much! :+1: