How to hide page section if a collection's empty?

Store Design
, ,

Topic summary

A user is seeking to automate the visibility of a page section on their Shopify store’s events page. Currently, they manually toggle a “coming soon” rich text section based on whether their “events” collection contains products.

Desired behavior:

  • Show “coming soon” section when the events collection is empty (no upcoming events)
  • Hide the section when 1+ events are available for ticket purchase

Current situation:

  • Manual hiding/unhiding is required
  • Looking for an automated solution to handle this dynamically

The user provided their store URL for reference. This appears to be a theme customization question requiring conditional logic based on collection product count.

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

Hi, I have a collection page called “events”, with the collection “events”, which allows users to purchase tickets to events if there are upcoming events.

There is a rich text section “coming soon”, which should appear when the event collection is empty (no available future events, old events expired), and disappear when the collection has 1 or more events (new events available for buying tickets for).

for now we are manually hiding/unhiding, is there a way to automate this?

Cheers.

1 Like
2

Btw the url is Events – Socialer Coliving & Coworking Space

3

Hi @thaiwanconcepts ,

Yes its possible but need to check code once. Can you please share your code here so I’ll provide you clear and exact solution

Thanks

4

There are several ways to do this.

Say, you can add a “Custom liquid” section and do something like:

{% if collections.events.all_products_count != 0 %}
  <style>
   section[id*=rich_text] {
      display: none;
   }
  </style>
{% endif %}

This will hide the “Rich text” section(s) on current page if collection “events” has products.

5

Hi @thaiwanconcepts

Yes — this can be automated using a small Liquid condition on your “events” collection page template.
You can make Shopify automatically show the “Coming Soon” message only when the collection is empty, and hide it when any product (event) exists.

Here’s how to do it step-by-step :backhand_index_pointing_down:

Option 1 — Quick Code (No App Needed)

  1. In your Shopify admin, go to
    2.Online Store → Themes → Edit code*.
  2. Open your collection template file — usually:
sections/main-collection-product-grid.liquid

or if you use a custom one for events:

templates/collection.events.liquid
  1. Find where your collection grid or product loop starts. It usually looks like:
{%- if collection.products_count > 0 -%}
  1. Right above or below that, add this code snippet:
{% if collection.handle == 'events' %}
  {% if collection.all_products_count == 0 %}
    <div class="coming-soon-message" style="text-align:center; padding:40px;">
      <h2>Coming Soon</h2>
      <p>Stay tuned for upcoming events!</p>
    </div>
  {% endif %}
{% endif %}

You can replace the text and styling as you like.
This message will only appear if the collection is empty.

Option 2 — Use Your Existing “Rich Text” Section

If your “Coming Soon” message is already a section in Customize, and you don’t want to delete it:

  1. Wrap that section’s include tag inside a condition:
{% if collection.all_products_count == 0 %}
  {% section 'rich-text-coming-soon' %}
{% endif %}

Replace 'rich-text-coming-soon' with the actual name of your section file.

Best regards,
Devcoder :laptop:

1 Like