Hey! Does anyone know how I can round buttons in the Debut Theme (e.g. shop now, add to cart, checkout)? What do I need to add to the code and where? Thanks so much!
Hello There,
Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.
Hi @Sally123
Debut has a global class for all the buttons on the site .btn in theme.scss.css. Try to find this class to increase the border-radius to 25px.
To do this, go to the Online Store->Actions->Edit code for the Debut theme. In the search, enter theme as in the screenshot.
You can find the $border-radius variable and increase the value, but in this case it will affect all the elements, not just the buttons. So you’d better find a class .btn by entering in the search and already to change the border-radius manually.
At your discretion, change the value, and we recommend creating a copy of the live theme and test around there, so that there is no downtime on the live theme.
Hi @Sally123 ,
Hope you are doing well. Please place this code at the end of theme.scss to set global button has rounding buttons:
.btn, .shopify-payment-button .shopify-payment-button__button–unbranded {
border-radius: 999px;
}
You can change 999px to the number that you want.
Screenshot to refer: https://prnt.sc/116maep
If you can’t do that, you can add me as a staff, I’ll check it for you.