Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
This is an accepted solution.
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!
Please share your store URL!
Thanks!
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
Hi Victor,
Unfortunately nothing happened after applying this code
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
Hi,
This also didn't have any effect
Please share your store URL!
Thanks!
Hi,
I've sent it to you via messages.
I've sent it via messages
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;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
This is an accepted solution.
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024