Solved

Rounding product variant buttons

stefan2002
Tourist
13 0 3

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

Accepted Solutions (2)
PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

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

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 11 (11)

dmwwebartisan
Shopify Partner
12280 2546 3693

@stefan2002 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

PageFly-Victor
Shopify Partner
7865 1785 3050

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

stefan2002
Tourist
13 0 3

Hi Victor,

 

Unfortunately nothing happened after applying this code

 

PageFly-Victor
Shopify Partner
7865 1785 3050

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 </body> -> Save.

 

<style>
.product-page-desc .SizeSwatchList .SizeSwatch {
padding: 16px 20px !important;
border-radius: 100% !important;
}
</style>

 

Hope that my solution works for you.

 

Best regards,
Victor | PageFly

stefan2002
Tourist
13 0 3

Hi,

 

This also didn't have any effect

dmwwebartisan
Shopify Partner
12280 2546 3693

@stefan2002 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
stefan2002
Tourist
13 0 3

Hi,

 

I've sent it to you via messages.

 

LeoPham
Shopify Partner
32 2 1

Hi @stefan2002 

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

banned
stefan2002
Tourist
13 0 3

I've sent it via messages

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

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

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app