Andrew – Product V2

#1. Current code

/* Change font and size of quantity label and input */
.product-quantity-input .quantity-label {
  font-family: 'bungee hairline', sans-serif; font-weight: 800; /* Use Bungee font with fallback */
  font-size: 14px; /* Adjust font size as needed */
}

.product-quantity-input input[type=number] {
  font-family: 'exodus', sans-serif; /* Use Bungee font with fallback */
  font-size: 14px; /* Adjust font size as needed */
  border-radius: 8px; /* Curve the corners */
  width: 70px; /* Adjust width to make it larger */
  padding: 8px; /* Add padding for spacing */
}

New code

/* Change font and size of quantity label and input */
.product-quantity-input .quantity-label, .quantity-label {
  font-family: 'bungee hairline', sans-serif; font-weight: 800; /* Use Bungee font with fallback */
  font-size: 14px !important; /* Adjust font size as needed */
}
.product-quantity-input input[type=number], .product-quantity-input-wrapper input {
  font-family: 'exodus', sans-serif !important; /* Use Bungee font with fallback */
  font-size: 14px !important; /* Adjust font size as needed */
  border-radius: 8px !important; /* Curve the corners */
  width: 70px !important; /* Adjust width to make it larger */
  padding: 8px !important; /* Add padding for spacing */
}

#2. Current code

/* Show the default up and down arrows for number input */
.product-quantity-input input[type=number]::-webkit-inner-spin-button,
.product-quantity-input input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button; /* Show the spin buttons */
}

New code

/* Show the default up and down arrows for number input */
.product-quantity-input input[type=number]::-webkit-inner-spin-button,
.product-quantity-input input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button; /* Show the spin buttons */
}
input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: auto !important;
    opacity: 1 !important;
    position: relative !important;
    right: 0 !important;
    cursor: pointer;
}

#3. Current code

/* Optional: Style the input when it's focused */
.product-quantity-input input[type=number]:focus {
  outline: none; /* Remove default focus outline */
  border-color: #007bff; /* Change border color on focus */
}

New code

/* Optional: Style the input when it's focused */
.product-quantity-input input[type=number]:focus {
  outline: none; /* Remove default focus outline */
  border-color: #007bff; /* Change border color on focus */
}
.product-quantity-input-wrapper input[type=number]:focus {
  outline: none; /* Remove default focus outline */
  border-color: #007bff !important; /* Change border color on focus */
}

#4. Current code

This code should work without update.

/* Change font and size of Lens label */
.variant-option-title {
  font-family: 'Bungee hairline', sans-serif; font-weight: 800; /* Use Bungee font with fallback */
  font-size: 14px; /* Adjust font size as needed */
}

#5. Current code

This code should work without update

/* Style the Add to Cart button */
.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
  background-color: black !important; /* Set black background */
  color: white !important; /* Set text color to white */
  border-radius: 20px !important; /* Set rounded corners */
  font-family: 'abel', sans-serif !important;
  /* Use custom font with fallback */
  transition: background-color 0.3s ease, color 0.3s ease; /* Add color transition */
  padding: px 20px !important; /* Adjust padding for button */
  margin: 10px 0 !important; /* Adjust margin for spacing */
  font-size: 14px !important; /* Set smaller font size */
  line-height: 1; /* Ensure text is vertically centered */
  text-align: center; /* Center text horizontally */
  display: inline-block; /* Ensure button size does not change */
}

/* Hover effect for Add to Cart button */
.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button:hover,
.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button:focus {
  transition-delay: 0s; /* No delay for hover transition */
  background-color: white !important; /* Change background to white on hover */
  color: black !important; /* Change text color to black on hover */
}

#6. Current code

Code for Cart Page. It will work. Update doesn’t affect Cart Page.