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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024