Product Variant Button Design Styling

Store Design
, ,
1

Hi, im trying to add a new style to my variant buttons. Currently struggling to add the small inner circle within the button. Could anyone help me out with a code for this? Greatly appreciated!

Link: https://www.mansome.eu/collections/trimmers/products/the-lowrider

The button element is called: .option-value.option-value-rounded {

Here is what I want.

JustinasR_0-1742291033308.png
JustinasR_0-1742291033308.png964×202 70 KB

And here is what I currently have:

JustinasR_1-1742291068058.png
JustinasR_1-1742291068058.png778×210 14.4 KB

2 
.option-value.option-value-rounded.option-selected {
    border: 0px solid transparent !important;
    box-shadow: inset 0 0 0 0px var(--color_accent), inset 0 0 0 1px var(--color_border) !important;
}

MustafA16_0-1742293846980.png
MustafA16_0-1742293846980.png1266×593 123 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

3

Thanks, however thats not what I asked for. I want to add the inner circle element.

JustinasR_0-1742294491644.png
JustinasR_0-1742294491644.png1866×594 92.1 KB

4

Hi @JustinasR ,

Yes, it can be done, but you will have to adjust the code.

5

Im aware of that.. Code is what im looking for..

6

@Mustafa_Ali Would you please be able to send updated code with the inside bullet point inner circle included? Would be much appreciated. Thanks