Customize Buy It Now Button and More Payment Options

Store Design
, , , ,

Topic summary

A user seeks to style their “Buy It Now” button to match their “Add to Cart” button and remove the “more payment options” link below it.

Solutions Proposed:

  • Basic CSS approach: Target .shopify-payment-button with custom background color, text color, border-radius, padding, and font-size to match the Add to Cart styling.

  • Advanced CSS solution: Apply detailed styling to .shopify-payment-button__button--unbranded including positioning, padding, text transformation, font properties, transitions, and pseudo-element (::before) for background effects. This targets theme-specific CSS variables.

Current Status:

The discussion remains unresolved. The user reported that the more detailed CSS solution did not work and is seeking alternative fixes. No solution has been confirmed successful yet, and the “more payment options” link removal remains unaddressed.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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

2

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

3

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

4

this didn’t work :disappointed_face: do you have any solutions?