How to make a size variant pill button clear like a quantity one?

Store Design
1

How do I have a clear size variant pill button similar to the quantity variant pill button?

DB1985_0-1690486976891.png
DB1985_0-1690486976891.png282×243 4.41 KB

2

Hello @DB1985 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css file

Add this following code at the bottom of page

.size-variant-button {
  background-color: transparent;
  border: 1px solid #000;
  color: #000;
  padding: 5px 10px;
  border-radius: 5px;
}

.size-variant-button:hover {
  background-color: #000;
  color: #FFF;
}

Replace .size-variant-button with the class or ID of your size variant pill button

Save changes

Hope this can help.

Transcy

1 Like
3

Thank you for your assistance, but after following exact edit code instructions, the variant pill still is a solid color and not transparent to show the value.