Border Around Product Varient fields, brooklyn

Solved
Highlighted
Tourist
8 1 0

Hi everyone, I'm looking to create a border around my color and size variants in brooklyn theme. Iv'e managed to do it by changing the border color from transparent to a code in the theme.liquid but its also put a border around the quantity selector which i really don't like. Help please!

 Capture3.PNG

0 Likes
Highlighted

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
8 1 0

Thanks, site is easylifestyling.net

0 Likes
Highlighted

Hello deej1221,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

.radio-wrapper.js.product-form__item {
    border: 1px solid black;
    padding: 2px;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
8 1 0

Thanks, that code added quite a large border around my existing border
Capture 4.PNG

 

To clarify..what i'm looking for is exactly what i have around the size and color option already, the faded grey border, just want it gone on the quantity selector.

Appreciate your time.

0 Likes
Highlighted
Tourist
8 1 0

This is an example of what i'm aiming for.

Captureexample 2.PNG

0 Likes
Highlighted
Tourist
8 1 0

Okay so i kind of used your code to make a new one that fits and does nearly what i need, i used

.single-option-selector__radio.single-option-selector-product-template.product-form__input {
border: 1px solid #b9b9b9;
padding: 7px;
}

added at the bottom of liquid.scss.timber 

The issue now is that the border matches the size of the variant too well and has somehow squished the word into the drop down arrow, like here the E in beige covered by the arrow.

Capture7.PNG

0 Likes
Highlighted
Tourist
8 1 0

This is an accepted solution.

Found the solution here's what worked for me using the FREE BROOKLYN theme, it's probably different for other themes i'm no expert.

Add this at the bottom of timber.scss.liquid

.single-option-selector__radio.single-option-selector-product-template.product-form__input {
border: 1px solid #b9b9b9;
padding: 8px 28px 8px 10px;
}

Change color or sizing as your wish.

Here are results.

 

deej1221_0-1594893404714.png

0 Likes