How to make Variants and Quantity selector on the same line - Debut Theme

Solved
VuongTuanAnh
Excursionist
26 0 2

Hi everyone,

How can I make the Variants and Quantity selector on the same line working on both Desktop and Mobile in Debut Theme like this website: 

https://jlifeinternational.com/collections/shikifutons/products/j-life-shikifuton-with-seikai-ha-nav...

VuongTuanAnh_0-1625899424606.png

VuongTuanAnh_1-1625899488505.png

I found some of the related topics in the forum but they didn't work in my case;

Thank you;

0 Likes
mkamalkayani
Explorer
65 5 5

Hi,

this requires theme code changes. I can do that. If you are interested, send me a personal message and we can discuss the details.

Thanks
Kamal

0 Likes
VuongTuanAnh
Excursionist
26 0 2

Hi @mkamalkayani, thank you

I found some code on this topic: https://community.shopify.com/c/Shopify-Design/Debut-Display-variant-selectors-and-quantity-in-same-...

.qtydiv label {
	 display: block;
	 margin-bottom: 5px;
   font-weight: 500;
}
 .qtydiv .btnqty {
	 display: inline-block;
	 cursor: pointer;
	 user-select: none;
   font-size: calc(var(--font-size-base) * 1);
   font-family: var(--font-stack-body);
   font-style: var(--font-style-body);
   font-weight: var(--font-weight-body);
   line-height: 5px;
	 padding: 5px;
}
 .qtydiv .btnqty.qtyminus {
	 margin-right: 5px;
   font-weight: 500;
}
 .qtydiv .btnqty.qtyplus {
	 margin-left: 5px;
   font-weight: 500;
}
 .qtydiv .quantity-input {
	 border: none;
	 padding: 5px;
	 text-align: center;
	 width: 30px;
	 outline: none;
	 display: inline-block;
}
 .qtydiv {
	 display: inline-block;
	 padding-right: 15px;
	 padding-top: 10px;
   text-align: center;
   justify-content: center;
}
.product-form__controls-group label{
  font-weight: 500;
}
.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%;
}

It works with only 1 variant + quantity selector

However, I'm stuck at making more than 2 variants and quantity stay in the same line

I add this code but it's not working:

.product-variant-parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.product-form__item {
    flex: 0 0 33.33%;
}

 

VuongTuanAnh_0-1626060944309.png

Can anyone fix the code a little bit to make it work?

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

Thank you

0 Likes
suyash1
Shopify Partner
2979 320 499

@VuongTuanAnh - actually your quantity /color and size variants are wrapped in separate div tags hence to make them in all same line will need multiple theme code changes

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
VuongTuanAnh
Excursionist
26 0 2

Thank you @suyash1, to make this happen, can I just copy and paste the code, or need to hire someone to do it for me?

Actually, I prefer doing it myself (if it is possible) because I want to change it to other stores  on my own. 

Appreciate  any help

0 Likes
suyash1
Shopify Partner
2979 320 499

This is an accepted solution.

Actually you can do it if you are familiar with liquid/HTML code, otherwise
I can do it for you. Also take backup of theme by duplicating , so if
anything goes wrong then we can recover

You have my email below, you can contact me in it, i will assist or do it
for you
You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly