Customizing payment buttons

Store Design
,

Topic summary

Goal: customize Shopify product page payment buttons to match a reference product page.

Requested changes:

  • Fill “Add to Cart” button with solid black.
  • Align “Add to Cart” and “Pay with PayPal” side by side and increase their height.
  • Make both buttons expand to match their text width and align at the top.
  • Slightly trim the bottom of the PayPal button and place “Other/More payment options” directly beneath it, with an underline.
  • Add a subtle separator line for the section.

Action taken:

  • A CSS snippet was provided to create a two-column grid for the buttons, add spacing, cap button height at 46px, and underline the “more payment options” link.

Latest update:

  • The user requests further adjustments: larger/taller buttons, widths matching text, trimming the PayPal button bottom, moving “More payment options” closer to the PayPal button, and filling “Add to Cart” with black, matching the provided reference page.

Status: partial progress; several design tweaks remain unaddressed. Awaiting a follow-up CSS revision. No final resolution yet. Images and a live reference link are central to visual expectations.

Summarized with AI on December 12. AI used: gpt-5.
1

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

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

CreatorTim_0-1733775184489.png
CreatorTim_0-1733775184489.png1918×466 146 KB

And here’s how I want it to look:

CreatorTim_1-1733775207610.png
CreatorTim_1-1733775207610.png1920×362 52.2 KB

So, I want:

  1. To fill the “Add to Cart” button with black color.
  2. Align the buttons side by side.
  3. Expand both buttons so they are as wide as the text.
  4. Slightly increase the height of both buttons, align them at the top, but trim the bottom of the “Pay with PayPal” button just a tiny bit.
  5. Move “Other Payment Options” right below the “Pay with PayPal” button.
  6. Add an underline to “Other Payment Options.”
  7. Add a subtle line to separate the entire section.

Here’s my store URL: 1049xn-ya.myshopify.com

Here’s a link to the store showing how I want it to look: https://tomnoske.store/products/cinema-luts

Thank you,

Tim

2

Hi @CreatorTim

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

.product-form__buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    column-gap: 1rem;
}
.product-form__buttons .product-form__submit {
    max-height: 46px;
}
.product-form__buttons #more-payment-options-link {
    text-decoration: underline !important;
}

Screenshot 2024-12-10 at 09.57.19.png
Screenshot 2024-12-10 at 09.57.19.png2314×722 138 KB

3

Hey, thanks for your help! I just need a few more adjustments.

I’d like both buttons to be larger. Stretch them so they’re as wide as the text and increase their height.

For the “Pay with PayPal” button, I’d like the bottom to be slightly trimmed, and “More payment options” moved closer to it.

Then, I’d like the “Add to Cart” button filled with black.

Everything should look like it does here: https://tomnoske.store/collections/all-products/products/cinema-luts

I really appreciate your help.
Thank you,
Tim

4

Hey, are you there? Please check the previous message, I wrote you feedback there.