One of the most common problems in Shopify themes is when a section shows blank space or a broken layout because no content was added in the Theme Editor.

Examples:

• A section shows an empty white box because no image was uploaded
• A heading block renders as extra space because the text field is empty
• A product carousel loads an empty container
• Buttons appear without labels

This tutorial teaches you how to automatically hide or disable a section when the merchant hasn’t added any content — perfect for clean, professional layouts.

✨ Why Handle Empty States?

If you do not add empty-state handling:

• Your page may look unfinished
• Extra whitespace appears between sections
• Sections load unnecessary HTML
• Search engines crawl “empty markup”

Adding logic to hide empty sections solves all of these.

🧩 Step 1 — Decide What Makes a Section “Empty”

Most sections can be considered empty if:

• No heading text
• No image selected
• No blocks added
• No products in a selected collection

You’ll add Liquid conditions to check for this.

🧩 Step 2 — Wrap Your Entire Section in a Liquid Condition

Open your section file:

1. Go to Online Store → Themes → Edit Code
2. Open Sections
3. Select the section you want to fix

Wrap your entire content in a condition like this:

{% if section.settings.heading != blank 
  or section.blocks.size > 0 
  or section.settings.image != blank 
%}

  

{% endif %}

This ensures the section only displays if content exists.

🧩 Step 3 — Example: Hide a Section If Heading & Image Are Empty

{% if section.settings.heading != blank or section.settings.image != blank %}

{% if section.settings.heading != blank %}

{{ section.settings.heading }}

{% endif %} {% if section.settings.image != blank %} {% endif %}

{% endif %}

If BOTH fields are empty, the section disappears completely.

🧩 Step 4 — Example: Hide a Block Repeater Section If No Blocks Added

This is ideal for FAQs, Icon lists, “How it works,” features, etc.

{% if section.blocks.size > 0 %}

{% endif %}

No blocks = no section.

🧩 Step 5 — Handle Collections With No Products

Useful for featured product grids or sliders.

{% assign products = section.settings.collection.products %}

{% if products.size > 0 %}
  

{% endif %}

If the merchant selects a collection with 0 products → section is hidden.

🧩 Step 6 — Hide Buttons When Text Is Empty

Buttons with missing labels look broken.

{% if section.settings.button_label != blank %}
  
    {{ section.settings.button_label }}
  
{% endif %}

🧪 Step 7 — Test Your Section

Inside Theme Editor:

1. Remove the heading
2. Remove the image
3. Remove all blocks

The section should disappear entirely — no spacing, no container, no empty HTML.

🎉 You're Done!

Your theme now handles empty states cleanly and professionally. This is essential for custom themes, client work, and professional Shopify development.

I can also generate tutorials for:

• Showing placeholder content instead of hiding the section
• Using schema settings to show/hide sections dynamically
• Making sections collapsible when empty
• Creating “Preview mode” content for the Theme Editor only

Just tell me what you'd like next!