Reduce space between product name and price on collection page.

Shopify Discussion

Topic summary

A user noticed unwanted vertical spacing between product titles and prices on collection pages for items without sale pricing. Products with ‘compare at’ prices displayed correctly with reviews sitting directly above the price.

Solution provided:

  • Add custom CSS targeting the .price__regular > span element
  • Set display: block and height: 0px to collapse the empty space
  • Apply to both .halo-block-content and .halo-collection-content classes

Implementation steps:

  1. Navigate to Online Store → Customize → Theme settings → Custom CSS
  2. Insert the provided CSS code
  3. Save and hard refresh (Ctrl + F5 or incognito mode)

The initial code only targeted the main page, requiring a revision to include collection pages. After applying the updated CSS ruleset, the spacing issue was successfully resolved across all product displays.

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

Hi,

I have just noticed a space between my product title and price on items that do not have a ‘compare at’ sale. I have not noticed this before. Is there a simple way to have the price sit directly below the reviews like you see on the sale items?

Thanks

2.png
2.png1366×768 302 KB

1 Like
2

Hi @MBTS . Welcome to the Shopify community!

Here’s how to achieve that:

  1. Navigate to Sales Channels → Online Store → “Customize” button → Theme settings (Gear icon on the left sidebar) → Custom CSS
  2. Add the following code:
.halo-block-content .card-information dl > .price__regular > span {
	display: block !important;
	height: 0px !important;
}
  1. Save (right top corner)
  2. Hard refresh the storefront

If done correctly, the result should be like this:

Screenshot_2.png
Screenshot_2.png1319×637 619 KB

3

Thank you. I have done as suggested. How do I hard refresh? I have added the code but the gap is still visible.

4

You just open it in incognito mode or press Ctrl + F5 in your browser.

The changes worked. Here’s what I see:

Screenshot_2.png
Screenshot_2.png1494×933 361 KB

5

How weird, I have refreshed and checked incognito mode. It appears unchanged to me.

6

It’s my bad. I was targeting the main page block with prices. Just give me a few minutes.

7

Here’s an updated ruleset. This one would cover the collection pages as well.

.halo-block-content .card-information dl > .price__regular > span,
.halo-collection-content .card-information dl > .price__regular > span {
  display: block !important;
  height: 0px !important;
}
8

Amazing, thank you!

1 Like
9

Anytime! Glad to help!