Variant buttons styling

Store Design
,
1

Hi, I want to add inner bullet-point-like inner circles into the variant buttons like this:

JustinasR_0-1742378127898.png
JustinasR_0-1742378127898.png1020×290 93.5 KB

Currently this is what I have: https://www.mansome.eu/collections/trimmers/products/shorty

JustinasR_1-1742378156911.png
JustinasR_1-1742378156911.png804×258 15.8 KB

Could anyone help me out with a CSS code please? Been struggling to get this working. Thanks!

1 Like
2

Update: I manage to insert the circle using below code, but shopify wouldn’t let me save this code due to content element.

.option-value.option-value-rounded.option-selected::before {
content: “”;
width: 20px;
height: 20px;
background-color: #d4af37;
border-radius: 50%;
position: absolute;
left: 10px;
}

3

**Hey @JustinasR **

Please follow below steps
Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file styles.css
Step 3: Paste the below code at bottom of the file → Save

Let me know if you need any other help.

.option-value .option-value-name {
    padding-left: 40px !important;;
}

.option-value .option-value-name:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #d5d5d5;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50%;
}

.option-value.option-selected .option-value-name:after {
    border: 4px solid #fdcc6b;
}
4

Thats amazing thanks a grand!

1 Like
5

Hi again! Actually I checked mobile, and there is a gap between the circe and text in mobile version only. With desktop its ok. Any idea what could be the issue here?

JustinasR_0-1742632799991.png
JustinasR_0-1742632799991.png626×954 60.6 KB

And if I switch languages at the bottom of the page using language selector, the gap is in the other variant.

JustinasR_1-1742632856601.png
JustinasR_1-1742632856601.png629×1262 87.7 KB

6

Hey @JustinasR

Please follow below steps
Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file styles.css
Step 3: Paste the below code at bottom of the file → Save

Let me know if you need any other help.

.option-value .option-value-name {
    text-align: left;
}
7

That worked like a charm! Thank you so much!

1 Like