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.
3

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

Anyway, thanks.