Hello, I just started Shopify and am trying to customize it on my own.
However, I have no idea how to put 2 variant pickers and quantity selector in one horizontal line.
I edit codes by adding following codes and it did make changes a little bit, but there is no space in between variant picker boxes. It does not seem to be right.
.product-form__input–dropdown {
display: inline-block;
}
.product-form__input–dropdown .select .select__select{
width: 100%;
margin: 0 10px;
padding-left: 10px;
}
I attached an image to show how I want my product page to look like.
Here’s the page I am talking about. https://intersection-coffee.myshopify.com/products/brazil-fruta-mercadao
Hope someone would help me out with this issue. Thank you.
Hello @INTERSECTIONcp
Could you please share your store URL or the page link (with a pass if your store password is enabled). I think I can give you the right solution.
1 Like
Hi, thanks for you kindness @GemPages
Here`s store URL https://intersection-coffee.myshopify.com/
and product page https://intersection-coffee.myshopify.com/products/brazil-fruta-mercadao
Pass is “skiffi”.
Almost everything is written in Japanese, so let me know if you have any problems with language!
Hi @INTERSECTIONcp ,
This is Victor from PageFly - Landing Page Builder App.
You can try this code by following these steps:
- Go to Online Store->Theme->Edit code
- Asset-> base.css
- Paste the below code at the bottom of the file
@media(min-width:1024px){
variant-selects{display:inline-block !important}
.product-form__input.product-form__quantity{
display:inline-block !important;
transform: translateY(-4px);
margin-left: 1rem;
}
}
Hope my solution works perfectly for you!
Regards,
Victor | PageFly
1 Like
Hello, @PageFly-Victor
Thanks for your help! I haven’t tried it yet, but it looks way better! I definitely will try it as soon as I get to my home later!
However, is it possible to add a little space between 2 variant pickers? In between grams and grind option boxes!
And if you could make overall width of three boxes (grams, grind, and quantity) exact same as the width of ‘add to cart’ button, that helps me a lot too!
Thank you for your help again!
Hello @INTERSECTIONcp ,
It’s GemPages support team and glad to support you today.
I would like to give you a solution to support you:
- Go to Online Store → Theme → Edit code:
-
Open your base.css file
-
Paste the below code bottom of file:
@media(min-width: 990px){
.product__info-wrapper variant-selects{
display: inline-block !important;
}
.product__info-wrapper variant-selects .product-form__input{
margin-right: 1rem;
}
.product__info-wrapper .product-form__input.product-form__quantity{
display: inline-block !important;
transform: translateY(-4px);
}
}
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
1 Like
@GemPages
Thanks for your help and it worked just perfectly! It’s exactly how I wanted!
Let me ask you one more thing, is it possible to reduce the space between 3 boxes and add to cart button so that it looks more uniformed?
and I also appreciate you so much @PageFly-Victor !
Hi @INTERSECTIONcp ,
You can add my code:
.quantity-input{min-height:45px !important}
Hope my solution works perfectly for you!
Regards,
Victor | PageFly
1 Like
hi, @PageFly-Victor ! Thanks for your help!
I tried your code, but it didn’t make any differences unfortunately…
Just to make sure that we are on the same track, I attached new pic. I want to reduce the space indicated by red box! I want to make it narrower.
Thank you
Hi @INTERSECTIONcp ,
You can continue to add my code:
variant-selects,variant-selects>div,.product-form__input.product-form__quantity{
margin-bottom: 0px !important;
}
.product-form__input.product-form__quantity~div{
margin-top: 0px !important;
}
Hope my solution works perfectly for you!
Regards,
Victor | PageFly team
1 Like
Thanks for your help @PageFly-Victor , the code worked!
you are welcome. I am glad when can help you 
1 Like
