Modifying payment buttons.

[CreatorTim]

Hey guys, I need help with modifying the payment buttons.

Here’s what it looks like on my site right now:

And here’s how I want it to look:

 

So, I want to:

1. Fill the "Add to cart" button with dark grey.
2. Align the buttons side by side.
3. Expand them to be as wide as the text.
4. Move "More payment options" closer to "Pay with PayPal."
5. Add a dividing line for separation.

I’d appreciate any help.
Tim

[namphan]

Hi @CreatorTim,

Please send the website link, I will check it for you

[CreatorTim]

Hey, here it is: 1049xn-ya.myshopify.com

[namphan]

Hi @CreatorTim,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product-form__buttons {
    max-width: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    border-bottom: 1px solid rgba(var(--color-button), var(--alpha-button-background));
    padding-bottom: 2.5rem;
}
.product-form__submit {
    width: 50% !important;
    margin-bottom: 0 !important;
    color: rgb(var(--color-button-text));
    background-color: rgba(var(--color-button), var(--alpha-button-background));
}
.shopify-payment-button {
    width: 50%;
}
more-payment-options-link {
    display: none;
}

[CreatorTim]

Hey, I really appreciate your help. It’s almost perfect.

I just need a few small tweaks:

Here’s how it looks now:

I’d like to raise both buttons a bit, slightly trim the "Pay with PayPal" button at the bottom, and add "More payment options" below it.

Then just make the line less bold, just almost invisible.

Just like it is here:

Thanks again!

[namphan]

Hi @CreatorTim,

You just need to remove the following code, it will work fine:

[CreatorTim]

Hi @namphan, 

It doesn’t look exactly how I’d like it to.

Here’s how it looks now:

And here’s what I’d like:

1. Slightly increase the height of both buttons.
2. Trim the "Pay with PayPal" button SLIGHTLY at the bottom and place "More payment options" right below it, but keep the top aligned with the "Add to cart" button.
3. Fill the "Add to cart" button with black.
4. Add an underline to "More payment options."
5. Make the long dividing line less noticeable, almost invisible.

Basically, make everything look like it does here: https://tomnoske.store/products/cinema-luts

I really appreciate your help.
Tim

[CreatorTim]

Hi, are we still connected?

It doesn’t look exactly how I’d like it to.

Here’s how it looks now:

And here’s what I’d like:

1. Slightly increase the height of both buttons.
2. Trim the "Pay with PayPal" button SLIGHTLY at the bottom and place "More payment options" right below it, but keep the top aligned with the "Add to cart" button.
3. Fill the "Add to cart" button with black.
4. Add an underline to "More payment options."
5. Make the long dividing line less noticeable, almost invisible.

Basically, make everything look like it does here: https://tomnoske.store/products/cinema-luts

I really appreciate your help.
Tim

[Kyle_liu]

Hi @CreatorTim 

Please share your store url.

[CreatorTim]

Hey, here it is: 1049xn-ya.myshopify.com