Customizing payment buttons.

[CreatorTim]

Hey guys, I need help with customizing 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:

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

[mt686]

Hey Tim! Customizing payment buttons like this can be done by adjusting your CSS and theme layout. Let’s break it down step by step to achieve what you’re looking for:

---

Steps to Customize Payment Buttons

1. Log in to Shopify Admin:

   • Navigate to Online Store > Themes > Edit Code.

2. Find the Relevant CSS and Section Files:

   • Locate theme.css or style.css in the Assets folder for styling.
   • Find the product-template.liquid or main-product.liquid in the Sections or Templates folder for structural adjustments.

---

CSS for Styling the Buttons

Add this CSS to the bottom of your CSS file:

/* Style for "Add to Cart" Button */
.product-form__submit {
    background-color: black;
    color: white;
    width: auto; /* Makes the button as wide as the text */
    height: 50px; /* Adjust height as needed */
    margin-right: 10px; /* Space between the buttons */
    display: inline-block; /* Aligns the buttons side by side */
}

/* Style for "Pay with PayPal" Button */
.paypal-button {
    height: 50px; /* Align heights with "Add to Cart" */
    margin-right: 0;
    display: inline-block;
    vertical-align: top; /* Aligns buttons at the top */
}

/* "Other Payment Options" Styling */
more-payment-options-link {
    margin-top: 10px; /* Space below the PayPal button */
    text-decoration: underline; /* Underlines the text */
    text-align: left; /* Align to the left if needed */
}

/* Subtle Line to Separate the Section */
.product-form__buttons {
    border-top: 1px solid #ddd; /* Light gray line */
    padding-top: 15px; /* Space between line and content */
}

---

Additional Notes

1. Button Alignment: The inline-block in the CSS ensures buttons align side by side. You can tweak the margin-right or width for spacing and sizing.
2. Height Adjustments: Change the height values in the CSS to make the buttons the same height or trim the PayPal button slightly.
3. Underline and Separator: The border-top and text-decoration rules handle the line and underline.

---

Easier Option with EasyEdits

If coding feels like a hassle, EasyEdits allows you to visually adjust buttons, alignments, and more without digging into code. You can edit during the free trial and keep the changes forever.

---

Let me know if you need help finding specific files or testing the changes! (P.S. I’m the developer of EasyEdits, so feel free to ask about it 😊).

[CreatorTim]

Hey, I really appreciate your help. I just need a few more tweaks. 

Here’s how it looks right now:

And I’d like:

1. Expand both buttons so they are as wide as the text.
2. Slightly increase the height of both buttons, align them at the top, but trim the bottom of the "Pay with PayPal" button a bit.
3. Move the "More Payment Options" item directly under the "Pay with PayPal" button.
4. Move the large, almost invisible dividing line to the bottom—I don’t want it at the top.
5. Also, I’m not sure why "More Payment Options" is underlined twice—I just want it underlined once.

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

Thank you a lot!
Tim