BUTTON DESIGN

lavly · ‎02-21-2025

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 · ‎02-21-2025

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;
}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

lavly · ‎02-21-2025

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

Dan-From-Ryviu · ‎02-21-2025

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

<style>
.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;
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

lavly · ‎02-21-2025

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

+
can you plz make it little shorter only on desktop?

B2Bridge · ‎02-21-2025

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 </head> tag and add the following code above </head> 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 😍

B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

lavly · ‎02-21-2025

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.

B2Bridge · ‎02-21-2025

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 %}

B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

lavly · ‎02-21-2025

it changed wierd

B2Bridge · ‎02-21-2025

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

B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

lavly · ‎02-21-2025

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

this is what i want

LizHoang · ‎02-21-2025

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

lavly · ‎02-21-2025

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.

LizHoang · ‎02-21-2025

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

BUTTON DESIGN

BUTTON DESIGN

Community Blog Articles