Removing white space from payment icon top and bottom

Technical Q&A
, , , , ,

Topic summary

A user seeks to remove excessive white space above and below payment icons on their Shopify product pages.

Initial Solution (Bottom Space):

  • Add CSS code to theme.liquid file above the </body> tag
  • Code targets .shopify-payment-button with margin-bottom: 0px !important;
  • Successfully removes bottom spacing

Follow-up Issue:

  • Top white space remains unresolved after initial fix

Additional Solution (Top Space):

  • Insert separate CSS targeting .shopify-payment-button__button with margin-top: -15px !important;
  • Also placed in theme.liquid above </body> tag
  • Spacing value (-15px) can be adjusted to achieve desired positioning

Status: Awaiting confirmation from original poster on whether the combined solutions resolved both spacing issues. Both helpers provided working code snippets with visual examples of expected results.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

How do I fix the spacing below and above the payment icons causing there to be whitespace? (See screenshot on bottom)

Product url (example): https://arissio.com/products/sophie-cozy-long-sleeve-knit-mini-dress-for-women?pr_prod_strat=e5_desc&pr_rec_id=d2c705690&pr_rec_pid=15091905692032&pr_ref_pid=15091911557504&pr_seq=uniform
Website: arissio.com

arissa_0-1742839464230.png
arissa_0-1742839464230.png828Ă—458 21.3 KB

1 Like
2

Hey @arissa

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742840263374.png
Moeed_0-1742840263374.png745Ă—719 40.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi, can you also help removing the top space? The bottom space is now changed but also the top is still a lot of white space

4

Hi @arissa :blush: I’m Ellie from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)

Here’s to adjust the top space → Please follow my steps below:
Step 1. Go to Online Store
Step 2. Find “Edit Code”
Step 3. Find “theme.liquid” file

Step 4: In the bottom of the file → find tag → add this code above tag:

Result:

image (3).png
image (3).png976Ă—415 25.1 KB

****If you want to adjust the space, just modify the “15x” in my code and test until you reach the desired position.

If both my code and Mooed’s code worked, appreciate if you could like and mark both of our replies as solutions :blue_heart:

5

Hi, @arissa :blush: Just wanna recheck if it worked or not? Do you need any further help?