How to get the Quantity Selector on the same line as Variants - Debut Theme

Store Design
1

Hi There

Is there a way I can edit my variant and the quantity selector to be on the same line like this?

From This

Screenshot (7).png
Screenshot (7).png545×247 4.7 KB

To this

Screenshot (8).png
Screenshot (8).png536×144 4.11 KB

for both mobile and desktop. Thanks :slightly_smiling_face:

2

@Krishant

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

3

https://mrkneestore.myshopify.com/products/s-xl-patchwork-knee-brace-support-sports-nylon-sleeve-pad-compression-sport-pads-running-basket-elbow-knee-pads

4

@Krishant

Thanks for details

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.product-form {
position: relative;
}
#ProductSelect-product-template + .product-form__controls-group {
    position: absolute;
    right: 20px;
    width: auto;
    display: inline-block;
    top: 32px;
}
.product-form__controls-group {
flex-wrap: nowrap;
    width: 80%;
}
.product-form__item {
    padding: 5px;
}

After coding This view

KetanKumar_0-1611816507889.png
KetanKumar_0-1611816507889.png1920×1080 255 KB

5

Hey KatanKumar, i am facing the same problem and will like to have my quantity selector and variant selector to the same line.

My url is: https://ea-onlineshop.de/products/handy-ladestation

Thanks a lot