How can I reduce white space in product listings on Debut theme?

Store Design

Topic summary

Main issue: Excessive white space on Debut theme product pages between the “Buy it now” button and the product title/description.

Context: A screenshot was shared illustrating the visible gap, suggesting the space is caused by elements under the dynamic checkout button.

Proposed solutions:

  • Add custom CSS to hide the “More payment options” element (class: shopify-payment-button__more-options) to reduce the gap.
  • Two variants were suggested:
    • .shopify-payment-button__more-options { display: none; }
    • .shopify-payment-button .shopify-payment-button__more-options { display: none !important; } (more specific and forceful).

Implementation steps: Online Store > Theme > Edit code > Assets > theme.css, paste the CSS at the bottom.

Outcome and status: The original poster acknowledged the help, implying the fix worked. No further issues raised; thread appears resolved.

Summarized with AI on February 21. AI used: gpt-5.
1

Hi,

Would someone be able to help me make this white spacing smaller on the product listings? I don’t want such a large gap. I’m talking about the gap in between ‘buy it now’ button and the title ‘chill out luxury bath oil’ in the description.

Screenshot 2022-03-23 at 14.23.27.png
Screenshot 2022-03-23 at 14.23.27.png954×526 9.77 KB

Thanks,

2 Likes
2

@mbhlg

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@mbhlg

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.shopify-payment-button__more-options {display: none;}
4

Hi @mbhlg ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.shopify-payment-button .shopify-payment-button__more-options {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

Thank you :slightly_smiling_face:

1 Like