What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Variant Pill with text inside

Solved

Variant Pill with text inside

TBS2023
Shopify Partner
219 1 17
Accepted Solution (1)

AnneLuo
Shopify Partner
1138 211 235

This is an 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:

AnneLuo_0-1729749499014.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

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
10344 2054 2137

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

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

AnneLuo
Shopify Partner
1138 211 235

This is an 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:

AnneLuo_0-1729749499014.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

TBS2023
Shopify Partner
219 1 17

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

AnneLuo
Shopify Partner
1138 211 235

I have applied the access. Please accept.

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
1138 211 235

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

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