Brooklyn Theme - Custom product options help

Solved
bjornar
Tourist
8 1 2

Hello, I'm trying to add custom options to a product, however, I need help to get them to the correct style.

They are supposed to look like this

bjornar_0-1618177288302.png

I am unable to get them to look like that, mine looks like this

bjornar_1-1618177324303.png

 

KetanKumar
Shopify Partner
17365 1875 6489

@bjornar 

Sorry you are facing this issue, it would be my pleasure to help you.

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

Please share your site URL,
I will check out the issue and provide you 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
bjornar
Tourist
8 1 2

Thank you sir, I have sent you a link in PM.

KetanKumar
Shopify Partner
17365 1875 6489

@bjornar 

thanks i will check and update

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
LitExtension
Shopify Partner
697 71 124

Hi @bjornar

Can you please share URL of your store? So I can check and give you the best solution in this case.

Have a great day! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
bjornar
Tourist
8 1 2

This is an accepted solution.

I managed to solve this issue, however, it might not be the most effective solution.

bjornar_0-1618438476907.png

 

product-template

 

<div class="radio-wrapper js product-form__item-custom">
              <label class="single-option-radio__label" for="file">Choose location</label>
                  <input id="location-left" class="location location-left" name="properties[Location]" value="Left" type="radio">
                      <label for="location-left" class="btn-custom-variant">Left</label>
                  <input id="location-middle" class="location location-middle" name="properties[Location]" value="Middle" type="radio" checked>
                      <label for="location-middle" class="btn-custom-variant">Middle</label>
                  <input id="location-right" class="location location-right" name="properties[Location]" value="right" type="radio">
                      <label for="location-right" class="btn-custom-variant">Right</label>
            </div>

 

 

theme.scss

 

.btn-custom-variant{
    border: 0;
  	padding-top: 0;
  	position: relative;
 	background-color: $colorBody;
}

input[type="radio"].location {
    display: none;
    & + label{
    @include accentFontStack;
    position: relative;
    display: inline-block;
    line-height: 1;
    padding: 9px 11px;
    margin: 3px 4px 7px 3px;
    font-size: em(13px);
    font-style: normal;
    background-color: $colorBody;
    border: 1px solid $colorBody;
    color: $colorHeadings;

    &.disabled:before {
      position: absolute;
      content: "";
      left: 50%;
      top: 0;
      bottom: 0;
      border-left: 1px solid;
      border-color: $colorTextBody;
      @include transform(rotate(45deg));
    }

    &:active,
    &:focus {
      background-color: adaptive-color($colorBody, 5%);
      border-color: adaptive-color($colorBody, 5%);
    
  		}
    }
    
  
  //style selected radio button's label
  &:checked + label {
    border-color: $colorHeadings;
  }

  //style label on input focus
  &:focus + label {
    background-color: adaptive-color($colorBody, 5%);
  }
}  
  
.product-form__item-custom {
  margin-bottom: 13px;
  padding-bottom: 15px;
} 

 

0 Likes