How can I resize and style the cart quantity button?

[Marco211]

Hello everyone, do you know how to make the quantity button smaller and with rounded edges in the cart? Then on the phone I would like the words “your cart” and “continue shopping” centered. Thank you all in advance for the replies.

https://refade-8966.myshopify.com/cart

password: refade

[Moeed]

Hey @Marco211

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[CodingSolution]

Add this code

.cart {
  text-align: center; /* To center "Your Cart" and "Continue Shopping" on mobile */
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.quantity {
  display: flex;
  align-items: center;
}

.quantity button {
  width: 30px; /* You can adjust the width as needed */
  height: 30px; /* You can adjust the height as needed */
  border-radius: 50%; /* To make the buttons rounded */
  border: 1px solid #000; /* Add a border for better visibility */
  background-color: #fff; /* Add a background color */
  font-size: 16px; /* You can adjust the font size as needed */
  cursor: pointer;
}

.quantity input {
  width: 40px; /* You can adjust the width as needed */
  text-align: center;
  font-size: 16px; /* You can adjust the font size as needed */
  border: 1px solid #000; /* Add a border for better visibility */
}

.continue-shopping {
  display: block;
  margin: 20px auto; /* To center the button on mobile */
  padding: 10px 20px;
  background-color: #007bff; /* You can choose your desired color */
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}