Quantity selector and variant on the same line - Debut Theme

[Biggy]

Hey,

Is there a way I can edit my variant (seize, color, etc) and the quantity selector to be on the same line like this?

Thank you in advance.

[dmwwebartisan]

Hey @Biggy ,

That need to customize your sections/product-template.liquid code. Please find the code and arrange liquid and HTML accordingly.

If need any suggestion feel free to contact me.

Thanks!

[diego_ezfy]

Hello,

Thank you for your question.

Yes, there is.

Please share your store URL, page URL and also password (if your store has one), I’ll help you out to the best of my ability.

Kind regards,
Diego

[Biggy]

Hey @dmwwebartisan ,

Thank you for your reply. What code should I use ?

And what do you mean by “arrange liquid and HTML accordingly”.

Thanks!

[Biggy]

Hey @diego_ezfy ,

Thank you for helping me. Here is my website : https://wizap.co/

Thank you in advance.

[diego_ezfy]

@Biggy , please do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 767px){
    .product-form-product-template .product-form__controls-group:nth-child(3){
    display: inline-block;
    max-width: calc(80% - 5px);
    width: 100%;
}

.product-form-product-template .product-form__controls-group:nth-child(5){
    display: inline-block;
    max-width: 20%;
    width: 100%;
    position: relative; 

}

#Quantity-product-template{
    width: 100%;
    max-width: 100%;
}
}

Please let me know whether it works.

Kind regards,
Diego

[dmwwebartisan]

Hey @Biggy ,

You have to find code for quantity in sections/product-template. liquid file and then find code for variant and then group together in single DIV. Right now both in different DIVs and form groups. If you are unable to do that, feel free to contact me. I will help.

Thanks!

[Biggy]

Thank you very much @diego_ezfy

It works well on mobile devices but not on desktop. Is there a way to make it work on both ?

Thanks!

[diego_ezfy]

oh, I presumed you wanted it exclusively for mobile devices

Please follow the previous steps and use this code instead:

.product-form-product-template .product-form__controls-group:nth-child(3){
    display: inline-block;
    max-width: calc(80% - 5px);
    width: 100%;
}

.product-form-product-template .product-form__controls-group:nth-child(5){
    display: inline-block;
    max-width: 20%;
    width: 100%;
    position: relative; 

}

#Quantity-product-template{
    width: 100%;
    max-width: 100%;
}

[Biggy]

@diego_ezfy Thank you so much ! It works like magic
I really appreciate your help.

Have a great day.

[diego_ezfy]

@Biggy You’re welcome, glad to hear it worked out!

Next time feel free to contact me personally, I’ll be happy to help.

Kind regards,
Diego

[Biggy]

I will do so for sure !

Thanks again.

[topographia]

Hi @diego_ezfy ,

Hope you can help me tweak your solution to get 2 variants on one line and 1 variant and quantity on the other. Right now it looks like this after I tried adjusting to 50% (but putting the %s under 50 in your code confirms that the quantity does move up on the same line as the variant). Thank you!

Before your code is added it looks like this:

[Joe_Giral]

I have a similar issue but the solutions listed do not work for me using the “Supply” theme.

How can I have my attributes drop-down list all show in one line?

Thanks for any help!

[VuongTuanAnh]

Hi @diego_ezfy . Thanks for your code, it works perfectly with one variant. My website has 2 variants, how to make them and the quantity selector on the same line? Thank you

My site: https://pawcheap.myshopify.com/ (password: mayflo)