Hiding Metaobject when is empty

Store Design
1

I created a metaobject for an About the Brand section, which displays as an image with text on Product Pages. When I don’t have a Vendor selected, it shows blank text boxes with a shopify default image. How can I hide this whole section if the related metafield is empty? I’m using the Refresh theme. I am hoping this doesn’t require extensive coding… thanks in advance for any help/advice!

Screenshot 2026-01-15 141058
Screenshot 2026-01-15 1410581150×370 14.8 KB

2

Did you try to get help with Sidekick? I believe this can be done by with simple if/else block on the product liquid where the these section rendered.

3

If the section allows a custom-liquid block, or the theme has a custom-liquid try a condition checking if the metaobject(MOB) is blank.
When blank render a style element targeting the section ID to hide it; get the id by inspecting the page using browser dev tools.
The exact syntax can vary based on how metaobjects and or metafields are setup and what your actually trying to use as a dynamic source or other.

Otherwise you’d have to go into the code and modify the entire thing to be able to check MOB’s first, which isn’t always the same as part of a section referencing a MOB.

4

Instead of using the heavy code or complex logics, you just need to add the blank loop.

I’ve shared the example below of the blank look on how it’s work.

{% if section.settings.custom_text != blank %}
<p>{{ section.settings.custom_text }}</p>
{% endif %}

In the above example you can see there is used the blank loop. And the paragraph text only render when the custom_text field have the data in it. Otherwise, it will not work.

So, in your coding you also need to add the blank loop.

5

Hi @usds123

Your “About the Brand” section is pulling data from:

  • a metaobject

  • linked via a product metafield (usually Vendor-related)

When no Vendor / metafield is set, Shopify still renders the section:

  • empty text fields

  • Shopify’s default placeholder image

So the fix is simply to not render the section unless the metafield exists.

The correct & safe solution (Liquid condition)

Step 1: Find where the section outputs the metaobject

In Refresh, this is usually in one of these files:

  • sections/main-product.liquid

  • sections/product-information.liquid

  • or a custom section you added for “About the Brand”

Look for something like:

product.metafields.custom.about_brand

or

product.metafields.custom.brand_info.value

Step 2: Wrap the entire section in an {% if %} condition

Example (most common case)

{% if product.metafields.custom.about_brand != blank %}
  <!-- About the Brand section markup -->
{% endif %}

If you are using a metaobject reference (very likely)

Metaobjects are usually accessed with .value:

{% if product.metafields.custom.about_brand.value != blank %}
  <!-- About the Brand section markup -->
{% endif %}

This ensures:

  • If no vendor / metafield is assigned → section is completely hidden

  • No empty text

  • No placeholder image

  • No layout gaps

Extra-safe version (recommended)

If your section uses multiple fields (image + text):

{% assign brand = product.metafields.custom.about_brand.value %}

{% if brand %}
  <!-- render image + text -->
{% endif %}

Best regards,
Devcoder :laptop:

6

There is no mention how this data is displayed, but this is important.

If you’ve added some liquid code to display your metaobject, then there are some good ideas above.

However, if you’re using metaobject properties in Dynamic sources and did not add/change liquid code, then you can hide the empty state display with CSS, either by targeting placeholder URL, or using custom liquid.

If you can share a link to the problematic page (with preview password if one is set), then I’m sure you’d get some suggestions as to what code to use.

Say, you can use “Custom liquid” similar to this:

{% if product.metafields.custom.about_brand.value == blank %}
  <style>
    .metaobject-wrapper { display: none; }
  </style>
{% endif %}

Or pure CSS like this:

.metaobject-wrapper:has(.placeholder-svg) { display: none; }
7

Hi @usds123,

Wrap the custom liquid code you used to display the metaobject inside the condition I provided. Put the entire block of code inside that condition.

If you have your display code ready, you just need to “sandwich” it between the if and endif tags. It should look like this in your Custom Liquid block:

{% if product.metafields.custom.your_metafield_name != blank %}

  {% comment %} 
     PASTE YOUR ENTIRE EXISTING CODE BELOW THIS LINE 
  {% endcomment %}

{% endif %}

Thanks!

8

Hi @usds123 ,
You can do this without heavy coding just a simple Liquid condition.
In the section or block where your metaobject is rendered, wrap it like this:

{% if product.vendor != blank and product.metafields.custom.about_brand != blank %}
  <!-- About the Brand section code here -->
{% endif %}