Customize Buy It Now Button and More Payment Options

[isSalon]

Hi, 

I am trying to edit the Buy It Now Button to have the same style as the add to cart button.  I noticed there is also a link "more payment options" below -- how can I delete this? 

Any help would be greatly appreciated. 

Store: is-salon-yaletown.myshopify.com

[Small_Task_Help]

Hi,

Change the buy now button style using css

CSS code example

.shopify-payment-button {
    background-color: #000; /* Change to match Add to Cart button */
    color: #fff; /* Text color */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Adjust spacing */
    font-size: 16px; /* Adjust text size */
}

remove more payment options link

[mageplaza-cs]

Hi @isSalon ,

I am from Mageplaza - Shopify solution expert.

You should add the following CSS code to the theme.css file to make the Buy It Now button match the style of the Add to Cart button.

button.shopify-payment-button__button.shopify-payment-button__button--unbranded{
    position: relative;
    display: inline-block;
    padding: 14px 28px;
    line-height: normal;
    border: 1px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    font-size: calc(var(--base-text-font-size) -(var(--default-text-font-size) - 12px));
    text-align: center;
    letter-spacing: 0.2em;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    background-color: transparent;
    transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 1;
    -webkit-tap-highlight-color: initial;
}
.shopify-payment-button__button--unbranded::before{
    background-color: var(--button-background);
    transform-origin: right center;
    transform: scale(0, 1);
}
.shopify-payment-button__button--unbranded::before{
    position: absolute;
    content: "";
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: scale(1, 1);
    transform-origin: left center;
    z-index: -1;
}

Please let me know if it works as expected!

Best regards