How to change size selection and add border?

KimGottwald · ‎05-22-2024

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

Thank yoU!

ThePrimeWeb · ‎05-22-2024

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.

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

BSSCommerce-HDL · ‎05-22-2024

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

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

Here is result:

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

KimGottwald · ‎05-22-2024

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 · ‎05-22-2024

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

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