Shopify themes, liquid, logos, and UX
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:
I found some of the related topics in the forum but they didn't work in my case;
Thank you;
Solved! Go to the solution
This is an accepted solution.
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
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%; }
Can anyone fix the code a little bit to make it work?
My website: https://pawcheap.myshopify.com (password: mayflo)
Thank you
@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
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
This is an accepted solution.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024