Solved

How to change size selection and add border?

KimGottwald
Pathfinder
137 0 20

Does somebody know how how to change the Size selection from picture 1 to 2?

Thank yoU!

 

Bildschirmfoto 2024-05-22 um 3.41.49 PM.pngIMG_1E45B4A50D5F-1.jpeg

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @KimGottwald,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
.single-option-radio label { 
    padding: 10px 20px !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
    margin: 0 !important;
    
}

.single-option-radio input:checked + label {
    border-color: black !important;
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716388693819.jpeg

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Expert
680 214 229

Hi @KimGottwald, Pls insert this code to your file css: 

 

 

.single-option-radio label { 
  padding: 9px 20px !important;
}

 

 

Here is result: 

BSSTechVenture_0-1716386183291.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

KimGottwald
Pathfinder
137 0 20

Sorry, I was not detailed enough.

 

I want to have a border around every Size as in the picture on the right.

 

Thank you.

BSSCommerce-HDL
Shopify Expert
680 214 229

 

Hi @KimGottwald
Pls insert this code to your file css: 

.single-option-radio label { 
   padding: 11px 20px !important;
   border: 1px solid #9c999961 !important;
}

Here is result: 

BSSTechVenture_0-1716388302607.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @KimGottwald,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
.single-option-radio label { 
    padding: 10px 20px !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
    margin: 0 !important;
    
}

.single-option-radio input:checked + label {
    border-color: black !important;
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716388693819.jpeg

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!