How can I remove the Heading space under a collection item?

Ask Me Anything Q&A Themesofficehoursrepo

Topic summary

A user successfully hid collection names in the Taste theme but encountered an issue with remaining clickable empty space where the heading previously appeared.

Problem Details:

  • Collection names were hidden using custom code
  • Empty, clickable space remained beneath collection item images
  • User wanted the space removed entirely to create a clean, clickable image

Solution Provided:

  • The issue was resolved using CSS code: .collection-list__item .card__content { display: none; }
  • However, a best practice recommendation was given: use the “Custom CSS” section in theme settings instead of directly editing theme code

Benefits of Custom CSS approach:

  • Easier theme updates in the future (modified code requires manual updating)
  • Greater flexibility to apply styling selectively to different sections
  • Settings are preserved when updating themes

The discussion is resolved, with the user confirming the solution worked.

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

Hi,

We’ve managed to hide the collection names via some basic coding in the Taste theme as we’d prefer to have them as part of the image - however there’s still a clickable empty space where the collection name was. Is there any way we can remove this space entirely so that it just functions as a clickable image?

Empty Space.png
Empty Space.png1919×802 299 KB

2

We’re using the Taste theme at the moment - the store is still under development so it’s blocked behind a password at the moment I’m afraid!

3

https://tastytoothpaste.co.uk/

The password is just tastytoothpaste1

1 Like
4

Brilliant, thank you!

5

Ok, I see you’ve already solved the problem by using this code:

.collection-list__item .card__content {
  display: none;
}

My recommendation though is to never edit theme code like this, but rather use the “Custom CSS” section settings (just below the “Theme settings” in your screenshot).

The benefits of using “Custom CSS” are:

  1. Your theme would be easy to update in the future – themes with modified code will require manual updating, while “Custom CSS” is a setting which will be transferred to updated theme.

  2. This code will apply only to the elements in this section, which allows you some flexibility, say, you may want this section look this way, but for another section you’d need to retain collection name under the image…