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

Solved
JustJinn
Excursionist
20 0 6

Bildschirmfoto 2021-01-16 um 12.05.31.png

The page from them. 

 

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

JHKCreate
Shopify Partner
2046 331 445

Hey There!

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

Hope this helps

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
KetanKumar
Shopify Partner
14323 1665 5155

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JustJinn
Excursionist
20 0 6

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

Here my product page exmaple.

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an 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:

Screen Shot 2021-01-16 at 20.43.23.png

What do you think?

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
KetanKumar
Shopify Partner
14323 1665 5155

This is an 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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JustJinn
Excursionist
20 0 6

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

KetanKumar
Shopify Partner
14323 1665 5155

@JustJinn 

Thanks for update 

yes, it can be done some customization code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes