How can I minimize white space on my Debut product page?

Store Design

Topic summary

Goal: Reduce excessive white space on a Shopify Debut product page by tightening spacing above the quantity box and placing the inventory count (“100 in stock”) beside it.

Key actions and guidance:

  • Edit theme CSS (Shopify Admin > Online store > Themes > Actions > Edit code > Assets > theme.css).
  • Reduce spacing: set .product-form { padding-top: 0 !important; }.
  • Reposition inventory text: adjust p.inventory-count margins (e.g., margin: 60px 0 -80px 100px !important;) so it sits beside the quantity selector.

Clarifications and fixes:

  • No changes to product-template.liquid were needed; CSS alone was sufficient.
  • Using !important on the inventory selector was required for the change to take effect. Some initial CSS had typos/margin values that didn’t apply until corrected and marked !important.

Outcome:

  • White space gap closed and inventory count positioned next to the quantity box as desired.
  • Original poster confirmed the solution worked and expressed satisfaction.

Notes:

  • A screenshot was provided to illustrate the spacing issue; CSS snippets were central to the solution.
  • Discussion concluded with a resolved layout; no outstanding questions.
Summarized with AI on February 23. AI used: gpt-5.
1

I am wanting to reduce the white space on my product pages. Please see screenshot. I feel that if i can reduce the padding above the quanity box and move the inventory level to the side of the quantity box, it will reduce the big white space a little

how do i do this? or any other design improvements for this layout feel free to suggest.

Screenshot 2022-02-07 at 10.45.07 AM (1).png
Screenshot 2022-02-07 at 10.45.07 AM (1).png920Ă—508 79.5 KB

2

@Henrybags ,

Hi, Please share the store URL.

3

@Henrybags ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
p.inventory-count {
    margin: 60px 0 -80px 100px;
}
.product-form{
    padding-top:0px !important;
}

Thanks!

4

Thank you so much that has closed the gap. is there any way of making the “100 in stock” next to the quanity box rather than above it? i think this will close the gap a little more an make it look better? thoughts?

5

@Henrybags ,

p.inventory-count {
    margin: 60px 0 -80px 100px;
}
.product-form{
    padding-top:0px !important;
}

Thanks!

6

@Henrybags ,

please add this CSS to your theme

p.inventory-count {
    margin: 60px 0 -80px 100px !important;
}

Thanks!

7

ok thank you. im guessing i have to change something in product-template.liquid for the inventory counter to move

8

@Henrybags ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
p.inventory-count {
    margin: 60px 0 -80px 100px !important;
}

Thanks!

9

thank you. this doesnt effect the inventory counter but i think you have probably helped me enough today. im so greatful

1 Like
10

sorryy… im an idiot.. the important part has made this active now. thank you so much. you have transformed the pages with your help and saved me hours of hunting the internet for the correct way to do this

1 Like