How can I round the variant selector buttons on my product page?

Store Design
1

How can I round my variant selector buttons on the product page like here: https://articture.com/products/light-of-life?variant=23168128843834

I have the Prestige Theme

1 Like
2

@stefan2002

Please share your store URL!

Thanks!

3

Hi @stefan2002 ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css.

Step 3: Paste the below code at bottom of the file → Save

.product-page-desc .SizeSwatchList .SizeSwatch {

    padding: 16px 20px !important;

    border-radius: 100% !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

4

Hi Victor,

Unfortunately nothing happened after applying this code

5

Hi @stefan2002 ,

This is Victor from PageFly - Landing Page Builder App

You can try again with this code by following these steps:
Please follow this:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code in tag → Save.

Hope that my solution works for you.

Best regards,
Victor | PageFly

6

Hi,

This also didn’t have any effect

7

@stefan2002

Please share your store URL!

Thanks!

8

Hi,

I’ve sent it to you via messages.

9

Hi @stefan2002

Can you share with me the page url? I will help you check it.

10

I’ve sent it via messages

11

Hi @stefan2002

I double-checked it again and please try again with this code by following these steps:

Please follow this:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

li label {

border-radius: 12px !important;

}

PageFlyVictor_0-1669870414365.png
PageFlyVictor_0-1669870414365.png675×290 76.1 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

12

@stefan2002

please add the following CSS code to your assets/ theme.css bottom of the file.

Please follow this:

Step 1: Go to Online Store-> Theme-> Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.SizeSwatch {border-radius: 12px !important;}

Thanks!