Product Sizing

Bobcomp1129
Excursionist
16 1 1

Doies anyone know what css I need to adjustto remove the radio buttons and change the hover over and active elements in the product size selector?

 

I deally i would like it to look like the one below.

 

Currently looks like this.

Screenshot 2024-04-09 at 9.27.09 PM.png

 

Want it to look like this.

 

Screenshot 2024-04-09 at 9.27.22 PM.png

Replies 6 (6)

AnneLuo
Shopify Partner
480 98 96

Hi, @Bobcomp1129 

Can you share your store url?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
AnneLuo
Shopify Partner
480 98 96

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

 

 

<style>
  .cAHHAr .pf-option-swatches div input {
    display: none;
  }
  .pf-th .pf-option-swatches {
    gap: 0 !important;
  }
  .cAHHAr .pf-option-swatches div{
    border-left: solid 1px #000;
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
  }
  .pf-vs-radio:last-child {
    border-right: solid 1px #000;
  }
  .cAHHAr .pf-vs-radio>label {
    background-color: #fff;
    border-radius: 0 !important;
    margin-left: 0 !important;
  }
</style>

 

 

 

The effect after modification

 

AnneLuo_0-1712716306828.png

 

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Bobcomp1129
Excursionist
16 1 1

It kind of worked, any way to remove what looks like padding on the left? Also to make it wider and center the sizes inside the box?

 

Screenshot 2024-04-10 at 8.38.42 AM.png

AnneLuo
Shopify Partner
480 98 96

Hi, @Bobcomp1129 

I noticed that you have adjusted it to this. Do you still need to make any modifications?

 

AnneLuo_0-1712795563092.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

LuffyOnePiece
Shopify Partner
521 78 96

Hi @Bobcomp1129 ,

 

Add This Css in your Edit Code > base.css File

.cAHHAr .pf-option-swatches div input {
    display: none;
}

.cAHHAr .pf-option-swatches div label {
    cursor: pointer;
}

.cAHHAr[style*='--g-md'] .pf-option-swatches {
    gap: 0 !important;
}

.__pf.__pf_ria74KC- .pf-24_ [data-option-name=Size]>label {
    margin: 0;
    border-radius: 0;
    border: 1px solid #000;
    background: #fff;
}

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184