How use Visibility Hidden CSS to hide H2 title of a Shopify Section

Store Design

Topic summary

A user wants to hide an H2 title in a Shopify section using visibility: hidden CSS.

Solution provided:

  • Use h2 { visibility: hidden !important; } to hide the element while preserving its space (padding, margin remain)
  • Use h2 { display: none !important; } to completely remove the element from the page flow

Key distinction:

  • visibility: hidden keeps the element’s layout space, leaving a blank gap
  • display: none removes the element entirely, causing other blocks to shift up

The original poster confirmed understanding that display: none removes rendering, not visibility: hidden.

Follow-up question:
Another user asked how to apply this to collection titles on a collection compilation page. They tried .collection.title { visibility: hidden !important; } but it didn’t work—this remains unresolved.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I would like to use “visibility hidden” in order to hide the H2 of a shopify section.

Thanks.

2 
h2 {
  visibility: hidden !important;
}

Please note, that the element will be hidden, but the location, padding, and margin will remain there! - you will see a blank gap on the page

If you would like to hide the element completely then use:

h2 {
  display: none !important;
}
3

Ok but I thought “display: none;” was keeping the rendering of the H2 bc
the blocks moved, not with “visibility: hidden;”.

Anyway, thanks.

4

Hii, Jenner. How could I apply this to collection titles in a collection compliation page?

I tried, but didn’t work:

collection.title {
visibility: hidden !important;
}

Thanks!