Eliminate white space in product cards on collection page

Shopify Discussion

Topic summary

A Shopify store owner sought help removing excess white space between product names and prices on their collection page product cards.

Solution provided:

  • Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  • Add custom CSS code targeting .card__metadata.price with margin-top: 0 !important; and .card__title.caption a with min-height: unset !important;

Resolution process:

  • Initial code suggestion didn’t work when the user first attempted it
  • After troubleshooting with a screenshot of the implementation, the support provider added the code directly and confirmed it worked
  • Before/after screenshots demonstrated successful white space removal
  • Issue was resolved, with the store owner expressing satisfaction with the outcome
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hey looking to understand how to eliminate the white space between my product name and price.

Screen Shot 2024-10-30 at 12.58.53 AM.png
Screen Shot 2024-10-30 at 12.58.53 AM.png684×689 177 KB

2

HI @chusmeatmarket

Could you please provide me with your store URL?

Best,

Daisy

3

https://chusmeatmarket.com/collections/100-fullblood-kosher-wagyu

4

Hi @chusmeatmarket

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.card__metadata .price {
    margin-top: 0 !important;
}

Here is the result: https://prnt.sc/LSbgcWUf1hDm

I hope this helps

Best,

Daisy

5

Hi Daisy,

Thanks for your response. Unfortunately this didn’t make any changes. Is there another place I should try pacing the code snip? In on of the files in the code?

6

Hi @chusmeatmarket

Could you please share a screenshot of the code you added to your CSS? This will help me double - check if there are any errors.

Best regards,

Daisy

7

Screen Shot 2024-11-01 at 12.06.44 AM.png
Screen Shot 2024-11-01 at 12.06.44 AM.png399×184 8.81 KB

8

Hi @chusmeatmarket

I have added the code from my end, and it seems to be working fine.

Before: Link
After: Link

.card__metadata .price {
    margin-top: 0 !important;
}
a.card__title.caption {
    min-height: unset !important;
}

Could you please add the code above to confirm if it meets your requirements?

Best regards,

Daisy

9

Amazing thank you so much. Let me know what I can do to reciprocate!