Quantity selector and variant on the same line - Debut Theme

Solved
Highlighted
New Member
8 0 0

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?

123123.jpg

Thank you in advance.

0 Likes
Highlighted
Shopify Partner
2262 495 644

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!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Astronaut
1083 178 213

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

Hey @dmwwebartisan ,

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

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

Thanks!

 

0 Likes
Highlighted
New Member
8 0 0

Hey @diego_ezfy ,

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

Thank you in advance.

0 Likes
Highlighted
Astronaut
1083 178 213

@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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
2262 495 644

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!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
8 0 0

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!

0 Likes
Highlighted
Astronaut
1083 178 213

This is an accepted solution.

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%;
}

 

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

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

Have a great day.

0 Likes