[Debut] Display variant selectors and quantity in same line

Solved
rbelle
Tourist
31 0 14

Hi,

My current product listing looks like this as it displays quantity inline if there is only one variant.

selectorspre.png

When there are two variants (size & colour) would it be possible to put all selectors in the same line?

selectors.png

My current CSS styles: 

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

The sample product can be seen here:

https://rachelbelle.com.sg/collections/dresses/products/retro-dotted-midi-dress

password: rachbelle

Thank you!

 

UmairA
Shopify Partner
872 85 173

Hey there @rbelle,

Can you please include the URL of your store? I'll take a look for you before I can offer any solution/guidance. Thanks

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
rbelle
Tourist
31 0 14

Hi!

Thank you for your reply, its https://rachel-belle-singapore.myshopify.com/ 

Someone has already fixed it for me as seen here: https://rachelbelle.com.sg/collections/dresses/products/retro-dotted-midi-dress

But when there is only one variant, https://rachelbelle.com.sg/collections/tops/products/cherry-printed-top

the alignment becomes block again. Do you know how it could be fixed?

rbelle_0-1619359170025.png

Thank you!

 

0 Likes
Natztech
Shopify Partner
637 171 424

This is an accepted solution.

 

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store