Change round buttons to square shape (Launch)

Solved

Hi there,

I want to make my buttons square instead of round, and have used this code below but nothing happened.

 

.btn-large { border-radius: 0px !important;}

Could anyone please point me in the right direction?

https://www.urbanalleyhandsanitiser.com.au/

passw: urbanalley

 

Thanks so much!

0 Likes
dmwwebartisan
Shopify Partner
4477 1005 1285

This is an accepted solution.

Hey there,

 

Please try to add following css in your assets/theme.scss.liquid file.

.button, .submit {
-webkit-border-radius: 0px !important;
}

Hope this works for you.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App

@dmwwebartisan That worked perfectly, thank you so much!!

 

Would you also happen to know how to get the add to cart button next to the quantity selector?

dmwwebartisan
Shopify Partner
4477 1005 1285

Sorry, get it wrong. Let me check.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
dmwwebartisan
Shopify Partner
4477 1005 1285

Hey there,

 

For cart button put this css in your assets/theme.scss.liquid file.

 

.template-product .product-form-nav {
float: left;
width: 20%;
}

@media screen and (min-width: 591px){
.template-product .product-form-nav {
    float: none;
    width: 100%;
}
}

Hope this will work.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes

Hi @dmwwebartisan  thanks for having a look at that too! I've pasted it in but nothing happened, would there be another solution to do this?

0 Likes
dmwwebartisan
Shopify Partner
4477 1005 1285

Hey,

 

It should work. I have to cross check once. 

Get back to you.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
dmwwebartisan
Shopify Partner
4477 1005 1285

Sorry, that was my mistake.

 

Following is corrected css. Please replace

@media screen and (max-width: 591px){
.template-product .product-form-nav {
    float: none;
    width: 100%;
}
}

Let me know, if this works.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes

hi @dmwwebartisan nothing seems to have changed with this one either. Below is what I have pasted (incl the square button code). Let me know if something went wrong! Thanks so much :)

 

.button, .submit {
-webkit-border-radius: 0px !important;
}


@media screen and (max-width: 591px){
.template-product .product-form-nav {
    float: none;
    width: 100%;
}
}
0 Likes
dmwwebartisan
Shopify Partner
4477 1005 1285

Hey,

 

Sure will check again and get back to you.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes