Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
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;
}
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;
}
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
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;
}
Very good! Perfect!
Thank you so much!👍
@OBSBP - can you please share this product page link?
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.
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;
}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024