How to add code for rounded buttons in Warehouse theme?

Store Design
1

Hi All,

Does anyone know what code to add to the theme.css file that will round the buttons on all of my products?

www.projectorscreenworld.com

Thank You!

2

Hi @ModernAV

That should do it:

button {
    border-radius: 50px;
}

button.product-form__add-button.button.button--primary.navigable {
    border-radius: 50px;
}

button.shopify-payment-button__button.shopify-payment-button__button--unbranded._2ogcW-Q9I-rgsSkNbRiJzA._2EiMjnumZ6FVtlC7RViKtj._2-dUletcCZ2ZL1aaH0GXxT.navigable
{
border-radius: 50px;
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

2 Likes
3

YES!!! Thank you…Now how to I round off the “Buy Now” button?

4

My bad, that should do it instead of the last paragraph in the previous code:

button.shopify-payment-button__button.shopify-payment-button__button--unbranded._2ogcW-Q9I-rgsSkNbRiJzA._2EiMjnumZ6FVtlC7RViKtj._2-dUletcCZ2ZL1aaH0GXxT.navigable {
    border-radius: 50px!important;
}
5

Can I do the same for the featured collection on our homepage as it did not change those buttons.