How can I modify the quantity selector and form fields on Venture?

Store Design
1

Hello!

I am having issues changing the quantity selector and form fields on Venture.

Screen Shot 2022-01-13 at 10.14.48 PM.png
Screen Shot 2022-01-13 at 10.14.48 PM.png680×332 34.6 KB

  1. Change Background Color of Quantity Selector

  2. Change Color of Number

  3. Make Quantity Selector Corners Round

Also, how do I change the color in the background of from fields?

Any assistance is appreciated!

Thank you!

Cheers,

Shannon

2

@Shannon92 - can you please share this page link? we will need css changes for it

3

@Shannon92

Please share your store URL I will check and send a solution for you.

Thanks!

4

https://hardseltzerboxco.co.uk/

5

https://hardseltzerboxco.co.uk/

6

Hi @Shannon92

Please go in to your theme.scss.liquid file and follow me:

.js-qty__input {
  width: 100%;
  padding-left: $width-qty-btn;
  padding-right: $width-qty-btn;
  text-align: center;
  background:#4ecdc4;   <- Background Color of Quantity Selector
  color:#1a535c;        <- Color of Text in Quantity Selector
  border-radius:10px;   <- Make Quantity Selector Corners Round
}

If you want to change color of hover you must change this:

.js-qty__adjust {
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: center;
  width: $width-qty-btn;
  padding: 0;
  background: none;
  border-style: solid;
  border-color: adaptive-color($color-form, 5%);
  border-width: 0;
  transition: background-color 0.03s ease-in;

  &:hover,
  &:focus {
    background-color: adaptive-color($color-form, 5%);  <- HOVER OF QUANTITY SELECTOR
    transition-duration: 0.08s;
  }

And one more thing for Rounded Corners , Add this :

.js-qty__adjust--minus {
  left: 0;
  border-right-width: 1px;
  border-top-left-radius:10px;    <- ADD THIS
  border-bottom-left-radius:10px;   <- ADD THIS
}

.js-qty__adjust--plus {
  right: 0;
  border-left-width: 1px;
  border-top-right-radius:10px;   <- ADD THIS
  border-bottom-right-radius:10px;  <- ADD THIS
}

And thats it :slightly_smiling_face: I hope I helped.

7

Wow! You’re a rockstar! Worked perfectly!

8

@Shannon92

Great, glad i helped. :slightly_smiling_face: