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.
Want it to look like this.
Hi, @Bobcomp1129
Can you share your store url?
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
The effect after modification
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
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
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?
Hi, @Bobcomp1129
I noticed that you have adjusted it to this. Do you still need to make any modifications?
