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

Solved

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

OBSBP
Tourist
3 0 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-11 at 00.08.59.png

  

Accepted Solutions (2)

EBOOST
Shopify Partner
1223 319 365

This is an accepted solution.

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;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: [email protected]
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

EBOOST
Shopify Partner
1223 319 365

This is an accepted solution.

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;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: [email protected]
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 7 (7)

EBOOST
Shopify Partner
1223 319 365

This is an accepted solution.

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;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: [email protected]
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
OBSBP
Tourist
3 0 1

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

EBOOST
Shopify Partner
1223 319 365

This is an accepted solution.

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;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: [email protected]
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
OBSBP
Tourist
3 0 1

Very good! Perfect!

 

Thank you so much!👍

 

suyash1
Shopify Partner
9974 1240 1578

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

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.

Huptech-Web
Shopify Partner
974 196 204

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

ZestardTech
Shopify Partner
5833 1058 1396

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: [email protected]
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing