How to adjust the size of the "More payment options" button in the product where?

Store Design
, ,
1

My “More payment options” button is too small to stand out for customers to click, how can I resize it?

tipipalette_0-1733814572613.png
tipipalette_0-1733814572613.png808×778 29.2 KB

My website address:

https://tipipalette.com/products/tipipalette

2

Hey @tipipalette ,

If you’re using inline styles for the “More payment options” button, you can directly adjust the style attributes for that tag. Here’s how you can modify the existing inline styles to resize the button:


    More payment options

result:

rajweb_0-1733815082695.png

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma
3

Where do I find the file to edit this tag?

4

@tipipalette ,

I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Best Regards.

5

To edit the “More payment options” button tag in your Shopify store, you need to locate the correct Liquid file in your theme’s code. Here’s how you can find and edit it:

Follow these Steps:

  1. Online Store

  2. Themes

  3. Edit Code

  4. Open the theme.css or syles.css file in the Assets folder.

  5. Add this CSS:

.shopify-payment-button__more-options {
    font-size: 18px !important;
    padding: 10px 20px !important;
    background-color: #d1a3a3 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    border: 2px solid #a87373 !important;
    text-align: center !important;
    text-decoration: none !important;
}

Save the file and refresh your product page.

Let me know if you’re unable to locate the file or need help applying these changes!

Thanks

6

Where do I find and edit that code?

7

thank you very much! :heart:

8

I looked in the Assets folder and there was no style.css or theme.css file so I created a new one and added the other code but the More payment options button size did not change.

tipipalette_0-1733816752081.png
tipipalette_0-1733816752081.png1919×808 43.2 KB

9

I looked in the Assets folder and there was no style.css or theme.css file so I created a new one and added the other code but the More payment options button size did not change.

tipipalette_0-1733817159591.png
tipipalette_0-1733817159591.png1916×864 46.2 KB

10

you can add custom CSS directly to the theme.liquid file under the section, but it’s generally better to add it to the section for proper styling. However, if you want to directly add it in the section, here’s how you can do it:

Steps to Add Custom CSS Directly in theme.liquid:

  1. Online Store > Themes > Edit Code

  2. In the Layout folder, find and open the theme.liquid file.

  3. Add Custom CSS Directly Below the Tag:

-In the theme.liquid file, scroll down to locate the tag.

-Add the following block right after the opening tag:

Visit your product page to check if the “More payment options” button is now resized and styled as you intended.