BUTTON DESIGN

[lavly]

How to change button style to rectangle?

to

why dmy buy now button text isn’t on ceneter
please help me

here is my shop
plz check

ᒪᗩᐺᒪყ Official Website｜ᒪᗩᐺᒪყ 公式HP｜ – Lavly

[Dan-From-Ryviu]

Please add this code to Cutom CSS in Online Store > Themes > Customize > Theme settings

.product-form__input--button input[type=radio]+label,
html #shopify-section-template--24258380923154__main .product-form__buttons button {
border-radius: 0 !important;
}
html #shopify-section-template--24258380923154__main .product-form__buttons button {
padding: unset;
}

[B2Bridge]

Hi @lavly
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code
2/ Search for “theme.liquid” file
3/ Open the file and search for tag and add the following code above tag
Here is the code for Step 3:

{% style %}
.product-form__buttons .product-form__submit{
    border-radius: 0!important;
}
.product-form__buttons .shopify-payment-button__button{
    border-radius: 0!important;
    padding: unset!important;
}
{% endstyle %}

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you

[LizHoang]

Hi @lavly

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

.product-form__buttons .product-form__submit{
    border-radius: 0 !important;
}
.product-form__buttons .shopify-payment-button__button{
    border-radius: 0 !important;
    padding: unset !important;
}

Result

Best,

Liz

[lavly]

thank you, it worked.
do you know how to make button shorter only on desktop, not mobile.

and i want to change this sku button too

and want to make shorter

plz help me.

[lavly]

thank you, it worked.
do you know how to make button shorter only on desktop, not mobile.

and i want to change this sku button too

and want to make shorter

plz help me.

[lavly]

thanks, it works on preview
but when i press the save button, it;s impossible to save because of an error

[B2Bridge]

Hi @lavly
Full code is:

{% style %}
.product-form__buttons .product-form__submit{
    border-radius: 0!important;
}
.product-form__buttons .shopify-payment-button__button{
    border-radius: 0!important;
    padding: unset!important;
}
.product-form__input > label {
    font-size: 12px!important;
}
{% endstyle %}

[Dan-From-Ryviu]

So please open theme.liquid file in Online Store > Themes > Edit code, after add this code

[lavly]

it changed wierd

[B2Bridge]

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you

[lavly]

thank u it works!
but i want same height with this two button,

can you plz make it little shorter only on desktop?

[lavly]

it isn;t what i want.
please check this img

this is what i want

[LizHoang]

Hi @lavly

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

.product-form__input--button-circle input[type=radio]+label:not([data-swatch-type=variant_image],[data-swatch-type=color_swatch],[data-swatch-type=shopify_swatch],[data-swatch-type=text]) {
    border-radius: 20px !important;
}

Result