Quantity selector next to the add to cart button ( Impact Theme )

[dreamtechzone_5]

Hello Everyone!

I am using Shopify Impact theme. I want to put the “Quantity Selector” button and the “Add To Cart” Button in one line on product page. I have added an image and I want to keep it that way.

Store: https://bdcoffeeshop.myshopify.com/

Password: Admin

[tim_1]

If you do not plan to output express checkout buttons, then code can be like this:

.product-info {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  column-gap: 1rem;
}
.product-info > * {
  width:100%;
}

.product-info > .product-info__quantity-selector, 
.product-info > .product-info__buy-buttons{
  width: fit-content;
  margin-bottom: 1rem;
  --rounded-button: 2rem; /* round buttons if needed */
}
 .product-info__buy-buttons {
   flex-grow:1 
 }

.quantity-selector {
  height: 60px;
  display: flex;
}

It may go into “Custom CSS” setting of the “product info” section in Customizer and produce this result:

But if you plan to have other buttons, like “Google pay” – this code would not work right, would need a different approach.

[dreamtechzone_5]

Wow great. It worked. But can the size of the quantity select box and the Add To Cart box be kept the same in mobile mode? I want to keep the size of the Add To Cart box the same as the Quantity Select box.

[tim_1]

Looks fine for me now?

[namphan]

Hi @dreamtechzone_5,

Please go to Customize > Theme settings > Custom CSS and add code:

.buy-buttons .button {
    height: 60px;
}