Rounding product variant buttons

Solved
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)

Accepted Solutions
PageFly-Victor
Shopify Partner
4522 746 2100

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

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

dmwwebartisan
Shopify Partner
11159 2395 3435

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 | Click here GemPages The most powerful Shopify page builder.

View solution in original post

Replies 11 (11)
dmwwebartisan
Shopify Partner
11159 2395 3435

@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 | Click here GemPages The most powerful Shopify page builder.
PageFly-Victor
Shopify Partner
4522 746 2100

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

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

stefan2002
Tourist
13 0 3

Hi Victor,

 

Unfortunately nothing happened after applying this code

 

PageFly-Victor
Shopify Partner
4522 746 2100

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

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

stefan2002
Tourist
13 0 3

Hi,

 

This also didn't have any effect

dmwwebartisan
Shopify Partner
11159 2395 3435

@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 | Click here GemPages The most powerful Shopify page builder.
stefan2002
Tourist
13 0 3

Hi,

 

I've sent it to you via messages.

 

LeoPham
Shopify Partner
9 0 0

Hi @stefan2002 

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

stefan2002
Tourist
13 0 3

I've sent it via messages

PageFly-Victor
Shopify Partner
4522 746 2100

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

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

dmwwebartisan
Shopify Partner
11159 2395 3435

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 | Click here GemPages The most powerful Shopify page builder.