Variant Pill with text inside

[TBS2023]

Hello

I would like my 'Size' variant button to be like this

https://www.thebodyshop.mu/collections/foundations-concealers/products/fresh-nude-foundation-1

instead of like this

https://the-body-shop-nordic.myshopify.com/collections/make-up-1/products/fresh-nude-foundation

ubahdo

[Dan-From-Ryviu]

I guess it has option to set Size is not color swatch option some where in your theme settings. 

[AnneLuo · Accepted solution]

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 before the </head> tag

<style>
#ProductSelect-template--23621779816779__main-10273838104907-option-size-30ml + label {
    border-radius: unset !important;
    text-indent: unset !important;
    width: 90px !important;
    text-align: center !important;
}
#ProductSelect-template--23621779816779__main-10273838104907-option-size-30ml + label::before{
  content: unset !important;
}
#ProductSelect-template--23621779816779__main-10273838104907-option-size-30ml + label::after{
  content: unset !important;
}
</style>

Result:

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

[TBS2023]

Hello - The code suddenly no longer works- could you please have a look - Thanks

[AnneLuo]

I have applied the access. Please accept.

[AnneLuo]

I have fixed it for your store. You can check on your online store.