How to fix shop pay button uneven styling(spacing)

Store Design
, ,
1

Hi, I want to make the shop pay button even, so that the bottom padding/spacing isn’t so big. Help would be great thanks. This shop pay buttom applies for all products/product pages.

https://blossomvase.com/products/cozy-glow-candles

Screenshot_20241225-201842_Chrome.jpg
Screenshot_20241225-201842_Chrome.jpg720×243 9.94 KB

2

Hi @blossomvase

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

a#more-payment-options-link {
    display: none !important;
}

image (12).png
image (12).png1341×632 143 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

3

Hi @blossomvase ,

It has more payment options below that button, but the color is the same as the background.

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

.shopify-payment-button__more-options {
color: #fff !important;
}

Screenshot 2024-12-25 at 14.43.27.png
Screenshot 2024-12-25 at 14.43.27.png1144×856 31.4 KB

4

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Actually, this is a link not padding, it’s just a black color that can’t be seen. Just change it to white to display it

Result：

AnneLuo_0-1735112720701.png
AnneLuo_0-1735112720701.png715×431 13.2 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

5

websensepro_4-1735115368749.png
websensepro_4-1735115368749.png440×454 11 KB

If you want it like the image above, paste this code.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.shopify-payment-button__more-options {
    color: white;
}

OR

websensepro_2-1735114805338.png
websensepro_2-1735114805338.png430×510 11.5 KB

If you want it like the image above, paste this code.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.shopify-payment-button__more-options {
    display: none !important;
}

OR

websensepro_3-1735115269030.png
websensepro_3-1735115269030.png447×509 12.1 KB

If you want it like the image above, paste this code.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.shopify-pay-button.pp-mt-4.pp-rounded-3xl {
    background-color: #fff !important;
    padding: 0 !important;
}
.shopify-payment-button__more-options {
    color: black;
}
.gravity-button {
    border-radius: 15px !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!