How can I adjust the placement and size of my cart quantity selector?

Ryan1998
Excursionist
16 0 3

Anyone know how I move the Qty selector and add to cart closer together, also make it thinner please. Also the up and down arrows. Will give a coffee if anyone can help 🙂

From this

Screenshot 2024-04-24 at 21.30.50.png

 To this please 

Screenshot 2024-04-24 at 21.31.57.png

Replies 5 (5)

Ryan1998
Excursionist
16 0 3

URL : easycaffe.com

thirtycoders
Shopify Partner
135 21 26

Hi @Ryan1998,

Go to Online Store -> Theme -> Edit code.
please add this css to the very end of your base.css file and check

.product-form .product-form__submit {
    width: calc(100% - 116px) !important;
    margin-left: 120px !important;
    margin-top: -70px !important;
        font-size: 16px !important;
}

#shopify-section-template--21220955717961__main button.quantity__button.no-js-hidden {
    margin-left: -11px;
    margin-top: 2px;
    display: flex !important;
}

#shopify-section-template--21220955717961__main quantity-input.quantity {
    width: 97px !important;
}

label.quantity__label.form__label{
      font-size: 2rem !important;
}


Thanks!

thirtycoders_0-1713993232046.png

 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
Ryan1998
Excursionist
16 0 3

Thanks for the response.

It doesnt seem to be working this is my current code

.quantity:after {
border-radius: 5px !important;
}

quantity-input.quantity {
width: 60px !important;
}

.product-form__submit {
background: #db4a2b !important;
color: #ffffff !important;
}

h1, h2, h3 {
font-size: 25px !important;
}

.slider-buttons.no-js-hidden.quick-add-hidden {
display: none;
}

.price__container {
font-size: 20px;
}

svg.icon.icon-minus {
display: none;
}

button.quantity__button.no-js-hidden {
display: none;
}

.product-form__input.product-form__quantity label.form__label {
font-weight: bold;
}

.button {
font-weight: bold;
}

Also any chance you able to include the up and down arrows 🙂

thirtycoders
Shopify Partner
135 21 26

Firstly, you can implement my code and adding this code here is the code.

.quantity__button svg {
  display: none;
}

.quantity__button[name="minus"]::before {
  content: url('minus-arrow-icon.png'); 
  display: inline-block;

}

.quantity__button[name="plus"]::before {
  content: url('plus-arrow-icon.png');
  display: inline-block;

}
Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
Ryan1998
Excursionist
16 0 3

Thanks but ive added this code and nothing changes I think it may be conflicting