Brooklyn: How can I make the variant selectors look like this?

[JustJinn]

The page from them. 

I want my input fields to look like that as well on desktop and mobile. My site.

[JHKCreate]

Hey There!

Try installing and configuring this application: https://apps.shopify.com/variant-swatch-king

Hope this helps

[KetanKumar]

@JustJinn 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site particular product page URL,
So I will check and provide a solution here.

[JustJinn]

Any product page should look like the given sites product page variant selectors.

Here my product page exmaple.

[PeanutButter · Accepted solution]

With the following css:

.radio-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f6f6;
}
.radio-wrapper .single-option-radio__label {
    margin-bottom: 0;
    margin-right: 10px;
    padding-left: 10px
}

 Your selectors would look like this:

What do you think?

If you like my solution remember to Like and Accept my answer

[KetanKumar · Accepted solution]

@JustJinn 

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.radio-wrapper .single-option-radio__label {margin-bottom: 0;}
.product-form__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f6f6f6;
    padding: 0px 5px 0px 15px;
}

[JustJinn]

Your code worked fine, do you also know how to design the quantity picker like on the example website?

[KetanKumar]

@JustJinn 

Thanks for update 

yes, it can be done some customization code